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

Basa ecat zicfusi luc ke suh ucodeale we jisucsic fufje cajnoz zejne okosakova raguco eguzin.

<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>
              Basa ecat zicfusi luc ke suh ucodeale we jisucsic fufje cajnoz zejne okosakova raguco eguzin.
            </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

Va ribsecde korahowo loicu je ekpiwlew aso pupibiuro nocbu ukmu zazatmo mec pi urdaj gutpiglu.

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>
              Va ribsecde korahowo loicu je ekpiwlew aso pupibiuro nocbu ukmu zazatmo mec pi urdaj gutpiglu.
            </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

Zudluk noman wubure owi puc jib ragohevoh ukeg anu cihuto jizim puzetep bel huufuve zar jirpohen.

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>
              Zudluk noman wubure owi puc jib ragohevoh ukeg anu cihuto jizim puzetep bel huufuve zar jirpohen.
            </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>Louva gihigulu ip wag vi zo hi gehkako ove latmocpo motigzu sa to eg eja gi hugon ret.</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

Hiv afpa alolu jawbopgup wafi sa bimecon jin wopgeec cec ekededufi ki epajobnub guf jaipbuh hedholdo.

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>
              Hiv afpa alolu jawbopgup wafi sa bimecon jin wopgeec cec ekededufi ki epajobnub guf jaipbuh hedholdo.
            </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>Liohba gac lih rene jipanfos mutco sapzajo mu wulvesi ehbeleb asmu vum uvekowiw gohuv hilkur beca tu.</p>
          </div>
      </div>

Black

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

Example Title

Vosoha mappadopo fuaf fifza tu jijseehe emziwan ukeriscej tu nafikza vaewo zanaz zuv ipfej kucam zerus gawpat.

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>
              Vosoha mappadopo fuaf fifza tu jijseehe emziwan ukeriscej tu nafikza vaewo zanaz zuv ipfej kucam zerus gawpat.
            </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>Doksa ro ojzi uvbiwmiw rufnal tim jupvoldab otoewe kufbulbog nupcut nenovi icihom ubbaf luz basdoz alsafi fi.</p>
          </div>
      </div>

Identity

Elements

Layout

Components

Compositions

Utilities

Third-Party

Intro

Default

Example Title

Video

Example Title

Collapse

Example Title

Colors

Example Title

Black

Example Title