Product Intro

Similar to the Intro and ProductTitle components, ProductIntro presents a larger introduction to a product, intended for use on product detail pages.

It uses flexbox and floats in old browsers, enhancing the via CSS Grid Layout where supported.

Model #251727

1200W/1500W Generator, 80cc

3 Year Limited Warranty

Powerful performance designed for comfort and durability is all yours with the Champion Portable Gas Cultivator. The durable 7-inch storable wheels make it easy to maneuver between jobs, while the hardened steel tines quickly cultivate up to 6 inches deep in any type of soil.

<div class="ProductIntro">
  <div class="ProductIntro-header u-spaceItems02">
    <p>
      Model #397646
    </p>
    <h1 class="u-md-textSize5">
      1200W/1500W Generator, 80cc
    </h1>
    <p>
      <a class="" href="">
        <svg width="28" height="28" viewBox="0 0 28 28" class="Icon u-textGrow1">
  <path d="M26.109 8.844c0 0.391-0.156 0.781-0.438 1.062l-13.438 13.438c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-7.781-7.781c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.609 10.25-10.266c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062z"/>
</svg>
        3 Year Limited Warranty
      </a>
    </p>
  </div>
  <div class="ProductIntro-gallery">
    <div class="snapper js-Snapper u-pullSides1" style='--snapper-items: 4'>
      <div class="snapper_pane">
        <div class="snapper_items">
          <div class="snapper_item u-padSides2" id="img-a">
            <img src="/images/prototypes/tcs/generator-2-large-square.jpg" alt=""
            class="js-Magnify" data-magnify-src="/images/prototypes/tcs/generator-2-large-square.jpg">
        </div>
            <div class="snapper_item u-padSides2" id="img-b">
              <img src="/images/prototypes/tcs/generator-large.png" alt=""
            class="js-Magnify" data-magnify-src="/images/prototypes/tcs/generator-large.png">
        </div>
              <div class="snapper_item u-padSides2" id="img-c">
                <img src="/images/prototypes/tcs/generator-lifestyle.jpg" alt=""
            class="js-Magnify" data-magnify-src="/images/prototypes/tcs/generator-lifestyle.jpg">
        </div>
                <div class="snapper_item u-padSides2" id="video">

                  <div class="FlexEmbed 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://www.youtube.com/watch?v&#x3D;fX9kvnOhhAk"
                  class="js-EmbedLazyLoader-preview">

                  <img class="FlexEmbed-content"
                      src="/images/prototypes/tcs/GeneratorFamily.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/fX9kvnOhhAk?autoplay=1&enablejsapi=1"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen
                      ></iframe>
                  '></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="snapper_nav">
              <a href="#img-a">
          <div class="FlexEmbed">
            <div class="FlexEmbed-ratio"></div>
            <img class="FlexEmbed-content" src="/images/prototypes/tcs/generator-2-large-square.jpg" alt="Gallery thumbnail 1 of 3">
          </div>
        </a>
              <a href="#img-b">
          <div class="FlexEmbed">
            <div class="FlexEmbed-ratio"></div>
            <img class="FlexEmbed-content" src="/images/prototypes/tcs/generator-large.png" alt="Gallery thumbnail 2 of 3">
          </div>
        </a>
              <a href="#img-c">
          <div class="FlexEmbed">
            <div class="FlexEmbed-ratio"></div>
            <img class="FlexEmbed-content" src="/images/prototypes/tcs/generator-lifestyle.jpg" alt="Gallery thumbnail 3 of 3">
          </div>
        </a>
              <a href="#video" class="snapper_video_link">

          <div class="FlexEmbed">
            <div class="FlexEmbed-ratio "></div>
              
              <div
                
                >
              
                <img class="FlexEmbed-content"
                    src="/images/prototypes/tcs/GeneratorFamily.jpg"
                    alt="Video Thumbnail">
              
                <div class="FlexEmbed-content FlexEmbed-content--overlay">
                  <svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon ">
                <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">Product Video</span>
                </div>
              </div>
          </div>
        </a>

            </div>
          </div>
        </div>
        <div class="ProductIntro-content u-spaceItems3">
          <div class="u-spaceItems02">
            <p>
              Powerful performance designed for comfort and durability is all yours with the Champion Portable Gas Cultivator. The durable 7-inch storable wheels make it easy to maneuver between jobs, while the hardened steel tines quickly cultivate up to 6 inches deep in any type of soil.
            </p>
          </div>
          <div class="u-bgSilver" style="min-height:8.25em;"></div>
          <div class="Grid Grid--alignMiddle Grid--withGutter">
            <div class="Grid-cell u-sizeFit">

              <button class="Button ">
                Find a Retailer
              </button>
            </div>
            <div class="Grid-cell u-sizeFill">
              <svg height="480" width="640" viewBox="0 0 640 480" class="Icon u-textGrow1 u-spaceRight06">
                <g fill-rule="evenodd" transform="scale(.9375)">
                  <g stroke-width="1pt">
                    <path d="M0 0h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#bd3d44" />
                    <path d="M0 39.385h972.81V78.77H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#fff" />
                  </g>
                  <path fill="#192f5d" d="M0 0h389.12v275.69H0z" />
                  <g fill="#fff">
                    <path d="M32.427 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 39.37l3.54 10.896h11.458L70.583 57l3.542 10.897-9.27-6.734-9.269 6.734L59.126 57l-9.269-6.734h11.458zm64.852 0l3.54 10.896h11.457L135.435 57l3.54 10.897-9.268-6.734-9.27 6.734L123.978 57l-9.27-6.734h11.458zm64.855 0l3.54 10.896h11.458L200.29 57l3.541 10.897-9.27-6.734-9.268 6.734L188.833 57l-9.269-6.734h11.457zm64.855 0l3.54 10.896h11.458L265.145 57l3.541 10.897-9.269-6.734-9.27 6.734L253.69 57l-9.27-6.734h11.458zm64.852 0l3.54 10.896h11.457L329.997 57l3.54 10.897-9.268-6.734-9.27 6.734L318.54 57l-9.27-6.734h11.458zM32.427 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 94.508l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM32.427 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 149.647l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z" />
                    <g>
                      <path d="M32.427 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 204.786l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z" />
                    </g>
                    <g>
                      <path d="M32.427 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z" />
                    </g>
                  </g>
                </g>
              </svg>
              <svg height="480" width="640" viewBox="0 0 640 480" class="Icon u-textGrow1 u-spaceRight06">
                <g transform="translate(74.118) scale(.9375)">
                  <path fill="#fff" d="M81.137 0h362.276v512H81.137z" />
                  <path fill="#bf0a30" d="M-100 0H81.138v512H-100zm543.413 0H624.55v512H443.414zM135.31 247.41l-14.067 4.808 65.456 57.446c4.95 14.764-1.72 19.116-5.97 26.86l71.06-9.02-1.85 71.512 14.718-.423-3.21-70.918 71.13 8.432c-4.402-9.297-8.32-14.233-4.247-29.098l65.414-54.426-11.447-4.144c-9.36-7.222 4.044-34.784 6.066-52.178 0 0-38.195 13.135-40.698 6.262l-9.727-18.685-34.747 38.17c-3.796.91-5.413-.6-6.304-3.808l16.053-79.766-25.42 14.297c-2.128.91-4.256.125-5.658-2.355l-24.45-49.06-25.21 50.95c-1.9 1.826-3.803 2.037-5.382.796l-24.204-13.578 14.53 79.143c-1.156 3.14-3.924 4.025-7.18 2.324l-33.216-37.737c-4.345 6.962-7.29 18.336-13.033 20.885-5.744 2.387-24.98-4.823-37.873-7.637 4.404 15.895 18.176 42.302 9.46 50.957z" />
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>