Fractal Starter
Project version : 0.1.2

Hero Single 

<div class="hero hero--single">

    <header class="main-header header--transparent">
        <div class="container">
            <div class="header__brand">
                <a href="/">
               <img src="../../images/brand/brand-white.svg" alt="" class="XXL Organisation brand" />
            </a>
            </div>

            <div class="header__nav js-nav-inside">
                <!--
             * The primary subnav can have two different states:
             *
             * 1) By default, the subnav appear on hover from the trigger link.
             *
             * 2) With the 'js-dropdown--onclick' on the ul.primary-nav,
             *		the subnav appear on click from the trigger link.
             *
            -->

                <nav class="main-nav">
                    <ul class="nav-primary" data-ui-component="primary-main">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="https://google.com" class="js-dropdown-link">About</a>

                            <ul class="nav-primary__sub-nav js-dropdown-menu">
                                <li><a href="#">Products</a></li>
                                <li><a href="#">Company</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                        <li>
                            <a href="#" class="js-dropdown-link">Services</a>

                            <ul class="nav-primary__sub-nav js-dropdown-menu">
                                <li><a href="#">Web</a></li>
                                <li><a href="#">Data</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="header__search header__tools">
                <button class="button button--search js-open-search">
               <i class="icon icon--search"></i>
               <span>Rechercher</span>
            </button>
            </div>

            <div class="header__devis header__tools">
                <a href="#" class="button button--devis">
               <i class="icon icon--devis"></i>
               <span>Finaliser mon devis</span>
            </a>

                <div class="block-cart" id="cartSummary">
                    <ul class="lst__unstyled">
                        <li></li>
                        <li></li>
                        <li></li>

                        <span>et 7 autres produits...</span>
                    </ul>

                    <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

                </div>
            </div>

            <div class="header__button">
                <button class="button button--menu js-toggle-menu">
               <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
                  <defs>
                     <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                        <stop stop-color="#E3CB78" offset="0%"/>
                        <stop stop-color="#BDA450" offset="49.584%"/>
                        <stop stop-color="#A07C2A" offset="100%"/>
                     </linearGradient>
                  </defs>
                  
                  <g fill="url(#a)" fill-rule="evenodd">
                     <rect id="bars-1" width="15" height="2" rx="1"/>
                     <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                     <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
                  </g>
               </svg>
               <span>Menu</span>
            </button>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="hero--single__content">
            <h1>RCF NX15</h1>
            <nav class="breadcrumb">
                <ol>
                    <li class="item-first">
                        <a href="/" title="Accueil">
                     Accueil
                  </a>
                    </li>

                    <li class="item-last">
                        <span>Current page</span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <img src="https://source.unsplash.com/random" alt="" />
</div>
 
<div class="hero hero--single">

   {{> @header header_transparent=true }}

   <div class="container">
      <div class="hero--single__content">
         <h1>{{hero.title}}</h1>
         {{> @nav-breadcrumb }}
      </div>
   </div>
   
   {{{hero.thumbnail}}}
</div>
 
{
  "hero": {
    "title": "RCF NX15",
    "thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
  }
}
  • Content: 
    .hero--single {
   position: relative;
   overflow: hidden;
   margin-bottom: $margin-m;

   &::after {
      content: "";
      @include absPosition($top: 0, $left: 0);
      width: 100%;
      height: 100%;
      z-index: 2;
      background: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0.9) 0%,
         rgba(0, 0, 0, 0.6) 120px,
         rgba(0, 0, 0, 0.6) 100%
      );
   }

   @include mediaWQuery($media-query-l) {
      margin-bottom: $margin-xl;
   }

   > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
   }

   .hero--single__content {
      padding: $margin-l 0;
      position: relative;
      z-index: 3;

      @supports (display: flex) {
         display: flex;
         flex-direction: column-reverse;
      }

      @include mediaWQuery($media-query-m) {
         padding: $margin-xl 0;
      }

      @include mediaWQuery($media-query-l) {
         padding: $margin-xxl 0;
      }

      h1 {
         margin-top: 0;
         line-height: $font-lineheight-s;
         color: $c-white;
         max-width: 25ch;
      }

      .breadcrumb,
      .breadcrumb a {
         color: $c-white;

         > ol > li:not(.item-lest)::after {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-right' class='svg-inline--fa fa-chevron-right fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
         }
      }
   }

   &--without-filter {
      &::after {
         display: none !important;
      }
   }
}
  • URL: /components/raw/hero-single/hero-single.scss
  • Filesystem Path: components/06-components/15-heros/04-hero-single/hero-single.scss
  • Size: 1.9 KB

There are no notes for this item.