Default Product Title
Model #87165
Bi wippif zucafez nusuwko daw zedzuh muhel govtiira ho wajuc kiegufi te wibu ih.
This component allows you to highlight a small set of 1-4 items. It was designed for the suggested generators in the HSB Selector tool, but could just as well work for a set of featured articles or products.
On small screens, each item in the Spotlight Grid is stacked vertically. On medium screens, the items remain vertically stacked, but the contents of each item are arranged in a horizontal layout to better use the screen space. On large screens, the items shift to columns, and the contents of each item change back to a vertical stack.
Try resizing your browser window to see how the layout responds.
The default component contains no visual styling aside from the layout described above and a bit of padding to space the items out. To control visual styling inside the items, use utility classes like spacing.
Content: Saj co fojcah zus belas ilwala bolobrav mig nidlagwej ipba kos vute sahikla bisufjoj jab atlo. Ehabiiru dosecu vapo wucbahi atobuko or gopi ejijulpi duze tihembut uk tazkid ve.
Content: Jodkicvo zaklag kouc pej kembevbit ba se uccoji cuuveata nojatu pe ju zuj. Nakge dodrote puj zawa viwor tuho mulal ju ahorahme hor lucmim vija hog gep evupo bekto fazaf zusuili.
Content: Pomhibde jezfuza rapba hatic secu ibmah ciguru pap sugobja iflolgu roigu joz rionsu limfafiw. Bo seztog wibbo fubvo bed tijeg ajiwuone voz adtoce bu befki wubsif ileha em vabur uh ajadumak sejgomzo.
<ul class="SpotlightGrid ">
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<p><strong>Content:</strong> Saj co fojcah zus belas ilwala bolobrav mig nidlagwej ipba kos vute sahikla bisufjoj jab atlo. Ehabiiru dosecu vapo wucbahi atobuko or gopi ejijulpi duze tihembut uk tazkid ve.</p>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Tozino huwweov asiw igelle dahog jitbe ewad za jonroje ef zoz guj.</p>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<p><strong>Content:</strong> Jodkicvo zaklag kouc pej kembevbit ba se uccoji cuuveata nojatu pe ju zuj. Nakge dodrote puj zawa viwor tuho mulal ju ahorahme hor lucmim vija hog gep evupo bekto fazaf zusuili.</p>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Wih vabomiv ro vuw po diviwdu ra kimham vidudkud ze faun lasmalco soir adrakal ere.</p>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<p><strong>Content:</strong> Pomhibde jezfuza rapba hatic secu ibmah ciguru pap sugobja iflolgu roigu joz rionsu limfafiw. Bo seztog wibbo fubvo bed tijeg ajiwuone voz adtoce bu befki wubsif ileha em vabur uh ajadumak sejgomzo.</p>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Gec dabnewob lo jelap ufu ino deznade zup sok jo eru warhag nen uti.</p>
</footer>
</li>
</ul>
If you plan to use a ProductCard
as the content, then use the
SpotlightGrid--withProductCard
modifier class to add some additional padding
to the header and footer so they align nicely with the contents of the
ProductCard
.
<div class="u-bgSilver">
<div class="u-containPage">
<ul class="SpotlightGrid SpotlightGrid--withProductCard">
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
Default Product Title
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #87165
</p>
<ul class="ProductTitle-flags">
<li>
<img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
</li>
<li>
<img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
</li>
</ul>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
<div class="ProductCard-content ">
<p>
Bi wippif zucafez nusuwko daw zedzuh muhel govtiira ho wajuc kiegufi te wibu ih.
</p>
</div>
</div>
</a>
<div class="ProductCard-actions">
<p>
<a class="ProductCard-primaryAction" href="">
Details
<svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
<polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
</a>
</p>
<p class="ProductCard-secondaryAction">
<label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
<input class="Toggle-state "
type="checkbox"
>
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text"> Compare
</span>
</label>
</p>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Kiizouca novij silep boglo tip lefik irzadfon sikug neije eke nada jamo hurlej icuar tefi.</p>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
Default Product Title
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #54540
</p>
<ul class="ProductTitle-flags">
<li>
<img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
</li>
<li>
<img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
</li>
</ul>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
<div class="ProductCard-content ">
<p>
Ko etnoce gar caf uhbo kervag hewufce va he mefikar havba wunob roala.
</p>
</div>
</div>
</a>
<div class="ProductCard-actions">
<p>
<a class="ProductCard-primaryAction" href="">
Details
<svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
<polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
</a>
</p>
<p class="ProductCard-secondaryAction">
<label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
<input class="Toggle-state "
type="checkbox"
>
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text"> Compare
</span>
</label>
</p>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Utmajho co jatureni wivlofgez nezbevto oni tid ma lij katpir vecfala mabefduw jegbi cu lesilup.</p>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
Default Product Title
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #35327
</p>
<ul class="ProductTitle-flags">
<li>
<img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
</li>
<li>
<img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
</li>
</ul>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
<div class="ProductCard-content ">
<p>
Komek von ura ritgoz liercuz nu timtugzu jav derawpu soljavle hakuh timovnu uggo hah faldo ditzatpo.
</p>
</div>
</div>
</a>
<div class="ProductCard-actions">
<p>
<a class="ProductCard-primaryAction" href="">
Details
<svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
<polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
</a>
</p>
<p class="ProductCard-secondaryAction">
<label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
<input class="Toggle-state "
type="checkbox"
>
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text"> Compare
</span>
</label>
</p>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Gegawu fisutuk boowe ifi bofkid bolvig geum cumnifu osuluwcuv kimiuwo ezjaj meluwuhu ima dit casodo heunufo.</p>
</footer>
</li>
</ul>
</div>
</div>
If there is only a single item in the Spotlight Grid, it will retain the horizontal layout on large screens.
<div class="u-bgSilver">
<div class="u-containPage">
<ul class="SpotlightGrid SpotlightGrid--withProductCard">
<li class="SpotlightGrid-item SpotlightGrid--withProductCard">
<header class="SpotlightGrid-header ">
<h3>Header</h3>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
Single Item Layout Modifier
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #97839
</p>
<ul class="ProductTitle-flags">
<li>
<img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
</li>
<li>
<img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
</li>
</ul>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22150%22%20viewBox%3D%220%200%20200%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
<div class="ProductCard-content ">
<p>
Jilziice napef dunbi vipwage on cuaw me ze luhvaga wewahuefa izzul ino igeatwo ip jol.
</p>
</div>
</div>
</a>
<div class="ProductCard-actions">
<p>
<a class="ProductCard-primaryAction" href="">
Details
<svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
<polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
</a>
</p>
<p class="ProductCard-secondaryAction">
<label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
<input class="Toggle-state "
type="checkbox"
name="Single Item Layout Modifier"
>
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text"> Compare
</span>
</label>
</p>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<p><strong>Footer:</strong> Omucak larsudjo jugmi piwbetuc fozrozgob dike cozehhi fofok uze wih ki gumoril.</p>
</footer>
</li>
</ul>
</div>
</div>
Here's an example of a more styled and populated SpotlightGrid
. Note the use
of utility classes to control the layout of the content in the header and
footer, and the SpotlightGrid--withProductCard
modifier class.
Work In Progress: This example relies on some prototype code that is currently being converted into patterns (the layout of the product card, the load control module styles, etc). See the HSB Selector Results prototype for reference.
A whole house generator is powerful enough to power your entire home.
This generator can keep your most important appliances powered.
This generator is the best bang for your buck you'll find anywhere.
<div class="u-bgSilver">
<div class="u-containPage">
<ul class="SpotlightGrid SpotlightGrid--withProductCard">
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header u-spaceItems04">
<h3 class="u-textSize2 u-flex u-flexAlignItemsCenter">
<svg width="132" height="132" viewBox="0 0 132 132" role="presentation" class="Icon u-textSize4 u-pullLeft05 u-spaceRight05">
<path d="M91.72343,26.22a3.28942,3.28942,0,0,0-3.3897,5.63836,43.43706,43.43706,0,1,1-24.0183-6.13853v5.54938a.65791.65791,0,0,0,.99648.56409l14.802-8.88158a.65724.65724,0,0,0,0-1.12819l-14.802-8.88158a.65781.65781,0,0,0-.99648.56409v5.63483A49.96363,49.96363,0,1,0,91.72343,26.22Z"/>
<path d="M94.87541,66.23525,67.36462,39.88413a1.973,1.973,0,0,0-2.72988,0L37.12395,66.23525a1.97339,1.97339,0,0,0,1.36526,3.39869h4.48448V90.05a2.63936,2.63936,0,0,0,2.63158,2.63158H59.25658V71.62891H72.74342V92.68154H86.39474A2.63936,2.63936,0,0,0,89.02632,90.05v-20.416h4.48448a1.97339,1.97339,0,0,0,1.36462-3.39869Z"/>
</svg>
Whole House
</h3>
<p>
A whole house generator is powerful enough to power your entire home.
</p>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ProductCard--rounded ProductCard--lgVertical">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize1">
14-kW Home Standby Generator with 200-Amp Whole House Switch
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #100294
</p>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="/images/prototypes/generators/hsb/100291-buty-556x0-c-default.jpg" alt="">
<div class="ProductCard-content u-spaceItems02">
<div>
[Star Rating Placeholder]
</div>
<p><i>Starting at $4,049</i></p>
<ul class="u-textSize01 u-listReset">
<li>14000W <span class="u-textDarkGray">Rated</span></li>
<li>63.5 <span class="u-textDarkGray">dBa</span></li>
<li>754cc <span class="u-textDarkGray">Engine</span></li>
<li>200A <span class="u-textDarkGray">Transfer Switch</span></li>
</ul>
</div>
</div>
</a>
<div class="ProductCard-actions">
<a
class="ProductCard-secondaryAction u-textSize01
Button Button--secondary js-quote-button"
href="#contact"
data-val="14-kw-home-standby-generator-with-200-amp-whole-house-switch">
Request a Quote
</a>
<a class="ProductCard-primaryAction" href="#">
Details
</a>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<div class="u-flex u-flexAlignItemsCenter u-sm-flexWrap u-lg-flexNoWrap">
<p>
You'll need <b>two</b> <a href="#">load control modules</a> to control
power to your high demand appliances.
</p>
<a href="#"
class="Thumbnail Thumbnail--link Thumbnail--badge u-flexNone u-spaceLeft01 u-sm-despaceLeft u-sm-spaceTop
u-lg-spaceLeft01 u-lg-despaceTop">
<img
alt="Load control modules"
class="Thumbnail-image "
src="/images/prototypes/ph/load-control-module.png"
>
<span class="Thumbnail-badge ">
<span class="Thumbnail-badgeContent">2</span>
</span>
</a>
</div>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header u-spaceItems04">
<h3 class="u-textSize2 u-flex u-flexAlignItemsCenter">
<svg width="132" height="132" viewBox="0 0 132 132" role="presentation" class="Icon u-textSize4 u-pullLeft05 u-spaceRight05">
<path d="M114.2 53c-7.7-26.6-35.5-42-62.1-34.3-26.6 7.7-42 35.5-34.3 62.1A49.92 49.92 0 0051.5 115c1.7.5 3.6-.5 4.1-2.2s-.5-3.6-2.2-4.1c-23.1-7-36.1-31.3-29.2-54.3 6.9-23 31.3-36.1 54.3-29.2 23 6.9 36.1 31.3 29.2 54.3-1.5 4.8-3.7 9.3-6.6 13.3-.2.3-.4.5-.6.8-4 5.3-7.9 8.3-8.4 8.6-8.8 5.5-15.6 7.4-19.1 5.3-3.5-2.1-3.8-8.2-3.7-10.4v-.4c14.3-2 15.4-20 15.2-27.6H89c1.9 0 3.5-1.5 3.5-3.5S91 62.1 89 62.1h-7.7V43.9c0-1.9-1.5-3.5-3.5-3.5s-3.5 1.5-3.5 3.5v18.2H58.5V43.9c0-1.9-1.5-3.5-3.5-3.5s-3.5 1.5-3.5 3.5v18.2h-7.7c-1.9 0-3.5 1.5-3.5 3.5s1.5 3.5 3.5 3.5h4.3c-.2 7.6.9 25.3 14.9 27.6 0 .5-.8 11.7 6.7 16.3 2 1.2 4.3 1.8 6.8 1.8 5.1 0 11.4-2.4 19-7.2l.1-.1c.2-.2 4.1-2.9 8.5-8.2.6-.6 1.2-1.3 1.8-2.1 9.3-12.2 12.8-28.4 8.3-44.2z"/>
</svg>
Select Circuit
</h3>
<p>
This generator can keep your most important appliances powered.
</p>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ProductCard--rounded ProductCard--lgVertical">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize1">
12.5-kW Home Standby Generator with 100-Amp Outdoor Switch
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #100179
</p>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="/images/prototypes/generators/hsb/100179-buty-556x0-c-default.jpg" alt="">
<div class="ProductCard-content u-spaceItems02">
<div>
[Star Rating Placeholder]
</div>
<p><i>Starting at $3,089</i></p>
<ul class="u-textSize01 u-listReset">
<li>12500W <span class="u-textDarkGray">Rated</span></li>
<li>63 <span class="u-textDarkGray">dBa</span></li>
<li>717cc <span class="u-textDarkGray">Engine</span></li>
<li>100A <span class="u-textDarkGray">Transfer Switch</span></li>
</ul>
</div>
</div>
</a>
<div class="ProductCard-actions">
<a
class="ProductCard-secondaryAction u-textSize01
Button Button--secondary js-quote-button"
href="#contact"
data-val="12-5-kw-home-standby-generator-with-100-amp-outdoor-switch">
Request a Quote
</a>
<a class="ProductCard-primaryAction" href="#">
Details
</a>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
<p>
You may not be able to power all of your high demand appliances
with this generator. You'll need to prioritize select appliances.
</p>
</footer>
</li>
<li class="SpotlightGrid-item ">
<header class="SpotlightGrid-header u-spaceItems04">
<h3 class="u-textSize2 u-flex u-flexAlignItemsCenter">
<svg width="132" height="132" viewBox="0 0 132 132" role="presentation" class="Icon u-textSize4 u-pullLeft05 u-spaceRight05">
<path d="M66.4 23.2c24 0 43.6 19.6 43.6 43.6s-19.6 43.6-43.6 43.6-43.6-19.5-43.6-43.6 19.5-43.6 43.6-43.6m0-6.4c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<path d="M94.5 55.8c0 .9-.4 1.8-1 2.5L62.3 89.5c-.7.7-1.6 1-2.5 1s-1.8-.4-2.5-1l-18-18.1c-.7-.7-1-1.6-1-2.5s.4-1.8 1-2.5l4.9-4.9c.7-.7 1.6-1 2.5-1 .9 0 1.8.4 2.5 1l10.7 10.7 23.8-23.8c.7-.7 1.6-1 2.5-1s1.8.4 2.5 1l4.9 4.9c.5.7.9 1.6.9 2.5z"/>
</svg>
The Simple Solution
</h3>
<p>
This generator is the best bang for your buck you'll find anywhere.
</p>
</header>
<div class="SpotlightGrid-content ">
<article class="ProductCard ProductCard--rounded ProductCard--lgVertical">
<a class="ProductCard-main" href="">
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize1">
8.5-kW Home Standby Generator with 50-Amp Indoor Switch
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #100174
</p>
</header>
<div class="ProductCard-body">
<img class="ProductCard-object " src="/images/prototypes/generators/hsb/100174-buty-1668x0-c-default.jpg" alt="">
<div class="ProductCard-content u-spaceItems02">
<div>
[Star Rating Placeholder]
</div>
<p><i>Starting at $2,349</i></p>
<ul class="u-textSize01 u-listReset">
<li>8500W <span class="u-textDarkGray">Rated</span></li>
<li>59.5 <span class="u-textDarkGray">dBa</span></li>
<li>439cc <span class="u-textDarkGray">Engine</span></li>
<li>50A <span class="u-textDarkGray">Transfer Switch</span></li>
</ul>
</div>
</div>
</a>
<div class="ProductCard-actions">
<a
class="ProductCard-secondaryAction u-textSize01
Button Button--secondary js-quote-button"
href="#contact"
data-val="8-5-kw-home-standby-generator-with-50-amp-indoor-switch">
Request a Quote
</a>
<a class="ProductCard-primaryAction" href="#">
Details
</a>
</div>
</article>
</div>
<footer class="SpotlightGrid-footer ">
</footer>
</li>
</ul>
</div>
</div>