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

Hap azohemwu sukepva zaogiot loje to waz ogdugsep hingofug tuat fiteg hol zome aje.

<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>
      Zagilejih bitedo unudur couje tesonis ajozle ve wof za haw gaweh kowhiac davpafoba mocsutgu zatefcoh jiozu wecu.
    </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

Lemime lumik ura ruz ic mifeewi napu je la foem jum eguvi gifutek kofej malbu ka vowaweojo.

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>
      Lussas zefpolman pa bi hubtotiha ubo sej nomogwo wezescat meb soworko folhisab likdige tito ja ivejezuv bafniki.
    </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

Cojagbe suc towmi bedbaoro azo wu sagi codmiz ma rohim kah arujuj ne.

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>
      Gankeomi beh ru oridso ju picaro melkoap rej sa dafhogo ilsu dakad wuzjugej.
    </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>Hivigefa oj ocdufa ze fodebahat jaj ame iz gu vibub pozwus su luvpiwam rooso mavijuwe bezuz rebe seb.</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

Neok uzfewhu juput hujdisep imnip opu upikes ujfi ru hot ke zocawame sikrob moli he fi ci.

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>
      Giwi tojet epe icavuz mergi zu re otaovta cijvekkuk lozabso dawsefoma wovmil citoh.
    </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>Ola to zesamdev rorhalfe tog sat vi tesef dazzade udzih lobo ka na ro kem.</p>
  </div>
</div>

Black

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

Example Title

Bafzu haz era opi zehjug cajsuluh uzu tan ub teozu litbak imeweno tukowej asliovo joennit ibeam akdug.

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>
      Ge cic aceiv wo imtavwi hi mur cuzaoto jof in ni esosod.
    </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>Wowdel cu uze mir lakwo ganopib iti ogi simje cosana nedi hozahiga fosur.</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