<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">minus iusto et</h2>
        <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam
            quo distinctio.</p>
        <button class="Button Button--default u-text-r-xs">minus iusto 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-size5of12;
      @extend .u-lg-before1of8;
    
      opacity: 0.95;
    }
    
  • URL: /components/raw/hero/index.css
  • Filesystem Path: src/components/hero/index.css
  • Size: 607 Bytes

There are no notes for this item.