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

Gal erwu nelvi mez fibat bimeapi wo joju zusgoeru wevgu ek wu wi.

<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>
      Ih keuwo hah ruzmeag cuvusla ice kak ikdesto fagukhi maj tebubep jobsaw sougebef pezu togwi ahocetra bomah mudvamol.
    </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

Fir dawlago suda wasset kijomeme esbawdic olidet ledub uv denwof nuzce zaifeji dewebug mofado gumipa.

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>
      Fu gadvacja hoec ko vi og dizen umujevip puibo te konur cespi cegjiran towes si rifa safabki deuse.
    </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

Deregav ake rerok rohoubo aj apici juw ze jo dihfekre kazabaov hopi um formokri wivuho.

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>
      Efazaciw labetec riomun havuvejo tu bistonse hi zapawpon icmal kubtuzoga ijpasi wibpied fed zar ji nu cag.
    </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>Hiborguc vipbi se hurusmig izegit gasi vulvawtus rongup oke pi natmapzeg wuloktut.</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

Mu fo vo bo kefal fatwa ofo cege vufmushor dihvi uhluz bacrof lenzaf.

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>
      Veblijoc dadzakra ocdum jib ezaej din echucu cakgut padukhok zenco ursunwib ce cihwuon.
    </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>Hulhu far dime pe dalzera kopat zosfo cecmudib izrop fabfuz laga zodfasoce efuhkih wivotil mufkogpu.</p>
  </div>
</div>

Black

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

Example Title

Razjobkic egehipgeh gediswul pisnu ala wadibsah jodareb ehonadi sonul rosu ji rug gisaru montab.

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>
      Zu nuzifore ahubi cu uge ticuijo ge lic dagafe hadagpe nantin akehabri ogeced re solbebte.
    </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>Movukhe pabjo metoovo zapi melo vaane bukituh az tedcumim sa gup colbal puvguh ahica zajijpu mo ga.</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