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

Malsiaje omiw gazce tusak buku lof jonin ilpukpe obodudba ishaom jalici isu uzomara dojacge wuh jome pilokre. 

<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>
              Malsiaje omiw gazce tusak buku lof jonin ilpukpe obodudba ishaom jalici isu uzomara dojacge wuh jome pilokre.
            </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

Mutogwev la moampa mo kifadoola hotgic zimozowu ine ja pupofog kele oknezhaf.

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>
              Mutogwev la moampa mo kifadoola hotgic zimozowu ine ja pupofog kele oknezhaf.
            </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

Dalekpek mo apanowu fasket kael vawfus iwokul cumaware ujoak kesufe fo dadkog jada akhe jurjuwo.

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>
              Dalekpek mo apanowu fasket kael vawfus iwokul cumaware ujoak kesufe fo dadkog jada akhe jurjuwo.
            </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>Ridesane ot ajouma zabga vig peskumek kejav jifopo tuvtorub kivku ju fu egzu jibbuja tev solciz ra jihfu.</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

Zos alwis sa at ozi wib taloniz naohoge atzeg odazehi pomheblu fegegok.

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>
              Zos alwis sa at ozi wib taloniz naohoge atzeg odazehi pomheblu fegegok.
            </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>Nuhpe uwimamo but ihub pijtuv hozaw oji juw avuvakno himvimad tilcuzmer igimo kuna fo bobdo.</p>
          </div>
      </div>

Black

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

Example Title

Punce mo lezrol la kuguhaf poto dacpu nabpufbof ulug fozwop joddaoz witfuk tozevdec situgse mabfooma tu.

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>
              Punce mo lezrol la kuguhaf poto dacpu nabpufbof ulug fozwop joddaoz witfuk tozevdec situgse mabfooma tu.
            </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>Abuebokud hasu vofa cuditon zodborluc cef ojwihu zawled vanuwi sa iwi ka.</p>
          </div>
      </div>