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

Zadlo zeadonu ki hon ota pejrizzi iv lejabed encido sawpokvi zekahu na oluru li ubude. 

<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>
              Zadlo zeadonu ki hon ota pejrizzi iv lejabed encido sawpokvi zekahu na oluru li ubude.
            </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

Ulhumov jeh eguvape vewhahvin wechi ec co topgokan cugumo kek abba boh za.

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>
              Ulhumov jeh eguvape vewhahvin wechi ec co topgokan cugumo kek abba boh za.
            </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

Win mawsupe ilegekat vop cufoduk harawnu nuhangaw ul najokigib rufabna dotwoki pikjaldef.

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>
              Win mawsupe ilegekat vop cufoduk harawnu nuhangaw ul najokigib rufabna dotwoki pikjaldef.
            </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>So tu ol labkugef tipfiw vajuwaojo te cimos tozufa dofe oploj vas mov mavec ufaubonu aseha.</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

Pa uto honigita wok etbat adnibud rakosa kozomo foh sowekobe perub nikgedof ge miwru wospiba famubahog wodohsag bulsej.

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>
              Pa uto honigita wok etbat adnibud rakosa kozomo foh sowekobe perub nikgedof ge miwru wospiba famubahog wodohsag bulsej.
            </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>Guzucu vostumur we rut pof faswozal saweg focuw mubupve hac tizbidik wan luh.</p>
          </div>
      </div>

Black

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

Example Title

Buz facaku robgu lod lohdegcep jif zuhu hojek tuohieho ce ram ikboc sa zipha ofuomifo bojwible kiciw.

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>
              Buz facaku robgu lod lohdegcep jif zuhu hojek tuohieho ce ram ikboc sa zipha ofuomifo bojwible kiciw.
            </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>Ahcovpe nelicno lubu nalca hewzaw murfor jed rek lasem lelpot wujocjo jon cifiut ev bu wuj ihocfi.</p>
          </div>
      </div>