<section class="Hero">
    <div class="Hero-content">
        <p class="u-padding-r-bottom u-padding-r-top u-text-r-xs">
            <a href="#" class="u-textClean u-color-60 u-text-h4"><span class="Dot u-background-60"></span>categoria</a>
        </p>
        <h2 class="u-text-h2 u-color-95">quae qui et</h2>
        <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Quasi tempora occaecati eum dolorem modi enim maiores et. Autem et magnam eos non qui ut dignissimos. Sit consequatur dolores voluptas nobis omnis consequatur. Quaerat explicabo autem quod dolores. Ab dolorem praesentium. Quo minus doloribus ipsam
            officiis quia.</p>
        <button class="Button Button--default u-text-r-xs">quae qui et</button>
    </div>
</section>
  • Content:
    /* @define Hero; */
    
    /*
     *  1.About 3 x Header size
     */
    
    :root {
      --Hero-height: 30em; /* 1 */
      --Hero-background-img: url("//placehold.it/2000x500?text=placeholder");
    }
    
    .Hero {
      background: var(--Hero-background-img);
      background-size: cover;
      height: var(--Hero-height);
    
      @extend .u-posRelative;
    }
    
    .Hero-content {
      @extend .u-posRelative;
      @extend .u-layoutCenterVertically;
    
      @extend .u-padding-r-all;
      @extend .u-background-grey-20;
    
      @extend .u-sizeFull;
    
      @extend .u-md-size6of12;
      @extend .u-md-before2of12;
    
      @extend .u-lg-size4of12;
      @extend .u-lg-before1of8;
    
      opacity: 0.95;
    }
    
  • URL: /components/raw/hero/index.css
  • Filesystem Path: src/modules/hero/index.css
  • Size: 607 Bytes

There are no notes for this item.