<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">illum sed adipisci</h2>
        <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Qui excepturi vel. Natus voluptas eligendi libero debitis. Accusamus porro sit repellat quis. Et dolore dolor dolorum tempore odit corrupti deleniti ab sit. Est nam quis quia hic nulla quis sunt ea. Eum voluptatem porro asperiores.</p>
        <button class="Button Button--default u-text-r-xs">illum sed adipisci</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.