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.
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">
<div class="u-flex u-flexAlignItemsCenter u-md-flexJustifyEnd u-md-flexRowReverse">
<p class="u-flexExpandRight">
Model #567028
</p>
<div class="u-flex u-flexAlignItemsCenter">
<svg height="480" width="640" viewBox="0 0 640 480" class="Icon Icon--block 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 Icon--block 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>
<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=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--withGap">
<div class="Grid-cell u-sizeFit">
<button class="Button ">
Find a Retailer
</button>
</div>
</div>
</div>
</div>The carousel should be able to display nine thumbnails in a row on a large screen.
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.