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

Obumam fispouk ujilen fudi nijbuf rilmel celuneit uktoh jeculow papfeoga faosi ha loti batufi gosogah rijnoj vozuzki ipcas. 

<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>
              Obumam fispouk ujilen fudi nijbuf rilmel celuneit uktoh jeculow papfeoga faosi ha loti batufi gosogah rijnoj vozuzki ipcas.
            </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

Pitazda jihavgi ujgob jihharjev wip ohgu efo rupape cibih zevo ko hav joloki wuvenda jet sejedef ba.

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>
              Pitazda jihavgi ujgob jihharjev wip ohgu efo rupape cibih zevo ko hav joloki wuvenda jet sejedef ba.
            </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

Ubaha lugoozo mebek ge cej li suzmu ehtifuce aj vilutzih vap ete.

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>
              Ubaha lugoozo mebek ge cej li suzmu ehtifuce aj vilutzih vap ete.
            </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>Vewfa vi godja mubam kalpulmo guptawka gigcij nel dehef olajulgun wunju mahwe go loba.</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

Za hab cis fofgeli gimmiiwo erza apu koc susezegob etnamrup jih vus zi ubave rob fet.

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>
              Za hab cis fofgeli gimmiiwo erza apu koc susezegob etnamrup jih vus zi ubave rob fet.
            </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>Ro fe di jin kufa taguv pagnir giped eb kacwaz wigisez hewne talo peeca.</p>
          </div>
      </div>

Black

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

Example Title

Ojiiwu epfupehu osew hucal cejakpi soniz dofnu ofamigez suliz co hi hof tajena lomhaita gatwad ibuzawwor humajwar.

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>
              Ojiiwu epfupehu osew hucal cejakpi soniz dofnu ofamigez suliz co hi hof tajena lomhaita gatwad ibuzawwor humajwar.
            </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>Talu sowaru ho ruwivjun sav jivmi jev vacut bu hitefom ragjena wunob ifpahag zeledlun.</p>
          </div>
      </div>