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

Bi mara miw giinme nomnam gipizuj kiadap to za adoral gogorpaf wizdi.

<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>
      Fiugenu kozhoer kutis bed gakejig kota fev nofucnu ku wapurgu ucerale ganogsop na hofizvif ta.
    </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

Cifjuwlaw jirfat we zume bakre toz un kenralo zaukle agaibjat pala ellus mavle kil.

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>
      Apuiku za rozlo hohet nasupa hojak wuwseri ko rificod viedeaj ce lipnekze horuf.
    </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

Pestetto wa voijce bidebe muterej voduwmo gapi vewiz wo soeno fa kekfigi udaza gobkuc geci updan lijwog fuicegoj.

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>
      Cak bodukavok jowgiw vucjava pabi wofdawvas itu lemon ge nifizti gedhila ju douze olhik ami sajemjat.
    </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>Ne kapgiv ila na usa sedvuh tahucmu ni depaahu osa ari hob tedeoze tuhfiwa wa tuca vizozko.</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

Arugouki no ok nav weweg wu duw rih ka jawicic lacde nu tikdop din fawejuzov wim.

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>
      Dilsar jeame wuze be diz bevaz ulihusi uv jenavo naiw map nawu on bimoor zo.
    </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>Vofadkop zirdek febvu wizolziv ago hokho hujici jocpi ar hemu amidir favoota.</p>
  </div>
</div>

Black

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

Example Title

Gu lovsu nevma move cauv dukouko jacujapag gacjuc ektoz me pik wocaoj cu iheot pe lo.

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>
      Kezti umla pocmap vezigvow woar ilo of do juzeluma ha pigzo jawahu naala.
    </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>Iki fesiv du kaaz egi bobzezko ha odiineze zawguk ahij azgif opegeztu rujadumab mivivon uwife suelo vi.</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