Web Toolkit

image/svg+xml GitHub

Hero: News 

<section>
    <div 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"><a href="#" class="u-color-95 u-textClean">earum rem culpa</a></h2>
            <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem
                ut eum consequatur et perferendis.</p>
            <a href="#news" class="js-scrollTo u-linkClean Button Button--info u-text-r-xs">numquam sit veniam
        <span class="u-padding-r-left Icon Icon-expand"></span></a>
        </div>
        <a href="#servizi" class="Forward Forward--absolute js-scrollTo" aria-hidden="true">
      <span class="Icon Icon-expand"></span>
    </a>
    </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.