Intro

Default

Container for introductory text content with accompanying "full-bleed" lifestyle imagery. Intended to lead pages showcasing product listings within a specific category.

If no image is necessary, you can accompish the same thing with a simple u-contain* utility.

Example Title

Huhviv nuca micebuni suwe jof ib fekijbi it ku ba zus corbepoj co ezuze vu cu balvivnil. 

<div class="Intro ">
      
          <div
            class="Intro-splash"
            style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);"
            >
          </div>
      
        <div class="Intro-content ">
            <h1 class="u-md-textSize5 u-lg-textSize6">
              Example Title
            </h1>
            <p>
              Huhviv nuca micebuni suwe jof ib fekijbi it ku ba zus corbepoj co ezuze vu cu balvivnil.
            </p>
        </div>
      
      
      </div>

Video

Optionally, you can use a video rather than an image. This will result in minor layout changes to preserve the aspect ratio of the video.

Example Title

Ed aw ubicefe so pediwho kadfac wungi enawawmah ovu gavput itu aronudok hofowfo isievo bif giw.

A video thumbnail showing a set of generators in the driveway of a house
Play Video 
<div class="Intro Intro--video ">
      
      
        <div class="Intro-content ">
            <h1 class="u-md-textSize5 u-lg-textSize6">
              Example Title
            </h1>
            <p>
              Ed aw ubicefe so pediwho kadfac wungi enawawmah ovu gavput itu aronudok hofowfo isievo bif giw.
            </p>
        </div>
      
            <div class="FlexEmbed Intro-video js-EmbedLazyLoader">
              <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
                  <div class="FlexEmbed-content u-bgBlack u-textSilver">
                    <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" class="u-spin FlexEmbed-icon">
                    <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z"/>
                  </svg>
                    
                  </div>
                  <a
                    href="https://youtu.be/nNPgi6qj0aE"
                    class="js-EmbedLazyLoader-preview">
                  
                    <img class="FlexEmbed-content"
                        src="/images/prototypes/hsb-lifestyle/HSBLifestyle-Cabin-11-1024x683.jpg"
                        alt="A video thumbnail showing a set of generators in the driveway of a house">
                  
                    <div class="FlexEmbed-content FlexEmbed-content--overlay">
                      <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon FlexEmbed-icon--interactive">
                    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
                  </svg>
                  
                        <span class="u-hiddenVisually">Play Video</span>
                    </div>
                  </a>
            
                <div class="js-EmbedLazyLoader-content"
                    hidden
                    data-embed-code='
                        <iframe
                          class="FlexEmbed-content"
                          src="https://www.youtube.com/embed/nNPgi6qj0aE?autoplay&#x3D;1&amp;enablejsapi&#x3D;1
                          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                          allowfullscreen
                        ></iframe>
                    '
                ></div>
            </div>
      
      </div>

Collapse

You can optionally add a Collapse section, which will display beneath the Intro content.

Example Title

Vi unlov vu sig muli ku okaep nofadu wotvit esecokeju gu fawwofnu ug ew soc.

A video thumbnail showing a set of generators in the driveway of a house
Play Video
Learn more 
<div class="Intro Intro--video Intro--withCollapse ">
      
      
        <div class="Intro-content ">
            <h1 class="u-md-textSize5 u-lg-textSize6">
              Example Title
            </h1>
            <p>
              Vi unlov vu sig muli ku okaep nofadu wotvit esecokeju gu fawwofnu ug ew soc.
            </p>
        </div>
      
            <div class="FlexEmbed Intro-video js-EmbedLazyLoader">
              <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
                  <div class="FlexEmbed-content u-bgBlack u-textSilver">
                    <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" class="u-spin FlexEmbed-icon">
                    <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z"/>
                  </svg>
                    
                  </div>
                  <a
                    href="https://youtu.be/nNPgi6qj0aE"
                    class="js-EmbedLazyLoader-preview">
                  
                    <img class="FlexEmbed-content"
                        src="/images/prototypes/hsb-lifestyle/HSBLifestyle-Cabin-11-1024x683.jpg"
                        alt="A video thumbnail showing a set of generators in the driveway of a house">
                  
                    <div class="FlexEmbed-content FlexEmbed-content--overlay">
                      <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon FlexEmbed-icon--interactive">
                    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
                  </svg>
                  
                        <span class="u-hiddenVisually">Play Video</span>
                    </div>
                  </a>
            
                <div class="js-EmbedLazyLoader-content"
                    hidden
                    data-embed-code='
                        <iframe
                          class="FlexEmbed-content"
                          src="https://www.youtube.com/embed/nNPgi6qj0aE?autoplay&#x3D;1&amp;enablejsapi&#x3D;1
                          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                          allowfullscreen
                        ></iframe>
                    '
                ></div>
            </div>
      
          <div class="Intro-toggle">
            <a
              class="Intro-toggleLink"
              href="# id"
              aria-controls=" id">
                <svg width="22" height="28" viewBox="0 0 22 28" class="Icon Icon--block u-spaceRight06 u-rotateOnExpand45">
        <path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"/>
      </svg>
                Learn more
            </a>
          </div>
          <div class="Intro-collapse Collapse js-Collapse" aria-hidden="true" id=" id">
              <p>Afiepota mefdec rep ciufa agautihad keokza ri misad idari mujfofto sehor tavi.</p>
          </div>
      </div>

Colors

The Intro component background color can be changed using a utility class of u-bgX, where X is replaced with a color from our palette).

Example Title

Itivi rinara vuoni wo cefes hucag zu jumsuz biwlal kiw bucgo mohge bep hupal copovej noebihar.

Learn more 
<div class="Intro Intro--withCollapse u-bgYellow">
      
          <div
            class="Intro-splash"
            style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);"
            >
          </div>
      
        <div class="Intro-content ">
            <h1 class="u-md-textSize5 u-lg-textSize6">
              Example Title
            </h1>
            <p>
              Itivi rinara vuoni wo cefes hucag zu jumsuz biwlal kiw bucgo mohge bep hupal copovej noebihar.
            </p>
        </div>
      
      
          <div class="Intro-toggle">
            <a
              class="Intro-toggleLink"
              href="# id"
              aria-controls=" id">
                <svg width="22" height="28" viewBox="0 0 22 28" class="Icon Icon--block u-spaceRight06 u-rotateOnExpand45">
        <path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"/>
      </svg>
                Learn more
            </a>
          </div>
          <div class="Intro-collapse Collapse js-Collapse" aria-hidden="true" id=" id">
              <p>Cengev wa omaobi hadrobada va woki bohvi neda kenbecic nivafho wuzu ucpa zidlekaki besusbi nejlor oku vav urcah.</p>
          </div>
      </div>

Black

The Intro component background color can be set to black by adding Noir Noir--muted classes.

Example Title

Tu awen giflaki gicita ufbo gude curso utmisja jukvud wapesi nidavutoj nina cupibu.

Learn more 
<div class="Intro Intro--withCollapse Noir Noir--muted">
      
          <div
            class="Intro-splash"
            style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);"
            >
          </div>
      
        <div class="Intro-content ">
            <h1 class="u-md-textSize5 u-lg-textSize6">
              Example Title
            </h1>
            <p>
              Tu awen giflaki gicita ufbo gude curso utmisja jukvud wapesi nidavutoj nina cupibu.
            </p>
        </div>
      
      
          <div class="Intro-toggle">
            <a
              class="Intro-toggleLink"
              href="# id"
              aria-controls=" id">
                <svg width="22" height="28" viewBox="0 0 22 28" class="Icon Icon--block u-spaceRight06 u-rotateOnExpand45">
        <path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"/>
      </svg>
                Learn more
            </a>
          </div>
          <div class="Intro-collapse Collapse js-Collapse" aria-hidden="true" id=" id">
              <p>Ci tal devossan pohudes gedvuca majahi de vogucno nin cagzile mif esigejjab hideil jojdu erucur.</p>
          </div>
      </div>