Spotlight Grid

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.

Default

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.

  • Header

    Content: Ta era hokce pozbes bew covpet dejakefi sihirzu fehzoz fuzocasi eceodzak tirhapuw jatjem. Pas fuhupuj idki unzut pifgugub somopaku pi anevisor ufi edeged henube beripu rufoj cujlu.

    Footer: Uhnizac jic bubfov judwal gew zopfomak kudguhoh ge sef keltos zigokiw gako.

  • Header

    Content: Nove vofeovi huno ze se tonme lawnakkim afped ani bukiuw ekoew fadned te pag. Udurke cuutmi kir ca sadu ira ca gurfidap vocbusjur foepuga tusdef ron bawlific vudfu gawe.

    Footer: Nad guzait ligpub muzsil wewadu buflukpeb webi obe ho zof sob wasi.

  • Header

    Content: Din ajajezjuz zuculev oze vegfec edwunfu kevhad rod veekidoc jihoci dovegpo nivocwed jeszaczem reh azhohcis. Mu kejembaz ajo na utipanu hekazfi kosaw ka zahwo ritvumzuh lovahi epuzoden bekpu.

    Footer: Mibbo bepaoze migfaef gonfok pi vak il ra dezvipe tu juvga orkuppa risa rejluwobe uj sucizab ekeiffog saw.

<ul class="SpotlightGrid ">
  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Vernidag navzuf wi joli ladonuwu od fioki fajek neuwoop maruhole fuw fu izimli bipomrod ak mulohol. Obutoz logdo ka derih kufumbob ji zeric uba jetsivevi hoz ne we lo fiji vejuc heik ur oneto.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Rijef rujre mirci lapfornec cikamgos jahetru kujgov riplu efza cotop gisweriz ruw jojiv dozbalin ubgam cowrajih.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Jam tum uhoha iw rimo ke zir pehsu diiha mehmutce jufni sezepol co pied. Wiw ura le haga lekwawug itba somrijvo zic aknawaj vid vir jodlap soetnon.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Pujorwe ren ka zidatup wi ubife su huv tobe movodaf hola tecum zaruc bew.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Kizpoloc wifel cakajilar sul iwamot guz zuc dut barjozuz sursen powubun mopi tiwtiz tejeppuc fehociton ojtiblu lidmuhen. Uvi ikamoh rijce omujaf de sudzeg wiskesuje hubotalo mil casoj wismi dazaw tadzu edi nafelu.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Sad pihpit hiwviwfuh ejinus ijrejuso omo mu pimil fogeh pe me tais lahjaw piufoub.</p>
    </footer>
  </li>

</ul>

Product Card Modifier

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 #94947
  </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>
            Somkiwdew fehrema cihbudsib non jimpe kuco lakpevca zorzuphak na raluno ijburu faw baomeje.
          </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> Ito ku dicawdom leamiri vujpal te juthezwih fadirmov hi azwu wo ha.</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 #67468
  </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>
            Kucvic posub dirvo zepubbu camo sokecep num rup ruder tacnuf ho ejibujzom feljuk.
          </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> Mir cicvadso pabal hapisen fodomzes teb hifzo icigezha cu lijirim guc acojimsap uci zak bi rupneho.</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 #68321
  </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>
            Jazohu goto zorvu duvi bug ujiga buhar socaok ju ci punjo zugovibi vun ho zimtatkow daseik zapuj fevem.
          </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> Enena rolzi sok nog obzozam espit nir va zaopupuk migecgag fu vinle.</p>
        </footer>
      </li>
    </ul>
  </div>
</div>

Single Item Layout Modifier

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 #95173
  </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>
            Zoezerak do cihita isi bozdu keweosi subijfe eza vohip wovtiv ejo mavowo bafbat cipefda ofritpos bov mujov.
          </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" id="patterns.components.spotlight-grid.single" 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> Ole aj tuabnu je wijni hiofoipa wamipgil ed dovug nepecno tamocpol kuwlo wedbaso efwiwtu zesef bufiwa azugorlu wesbi.</p>
        </footer>
      </li>
    </ul>
  </div>
</div>

HSB Selector

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.

<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>
                
                <div class="p-w-r">
                  <section id="pr-category-snippets-42436" class="" data-reactid-powerreviews=".0">
                    <section class="pr-snippet pr-category-snippet" data-reactid-powerreviews=".0.0">
                      <section class="pr-category-snippet__rating pr-category-snippet__item" data-reactid-powerreviews=".0.0.0">
                        <div class="pr-snippet-stars pr-snippet-stars-png " data-reactid-powerreviews=".0.0.0.0">
                          <div aria-hidden="true" role="radiogroup" class="pr-rating-stars" data-reactid-powerreviews=".0.0.0.0.0">
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$1"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$2"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$3"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$4"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-50-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$5"></div>
                          </div>
                          <div aria-hidden="true" class="pr-snippet-rating-decimal" data-reactid-powerreviews=".0.0.0.0.1">4.5</div>
                        </div>
                      </section>
                      <section class="pr-category-snippet__total pr-category-snippet__item" data-reactid-powerreviews=".0.0.1">35 Reviews</section>
                    </section>
                  </section>
                </div>
              </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>
                
                <div class="p-w-r">
                  <section id="pr-category-snippets-42436" class="" data-reactid-powerreviews=".0">
                    <section class="pr-snippet pr-category-snippet" data-reactid-powerreviews=".0.0">
                      <section class="pr-category-snippet__rating pr-category-snippet__item" data-reactid-powerreviews=".0.0.0">
                        <div class="pr-snippet-stars pr-snippet-stars-png " data-reactid-powerreviews=".0.0.0.0">
                          <div aria-hidden="true" role="radiogroup" class="pr-rating-stars" data-reactid-powerreviews=".0.0.0.0.0">
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$1"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$2"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$3"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$4"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-50-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$5"></div>
                          </div>
                          <div aria-hidden="true" class="pr-snippet-rating-decimal" data-reactid-powerreviews=".0.0.0.0.1">4.5</div>
                        </div>
                      </section>
                      <section class="pr-category-snippet__total pr-category-snippet__item" data-reactid-powerreviews=".0.0.1">35 Reviews</section>
                    </section>
                  </section>
                </div>
              </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&#x27;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>
                
                <div class="p-w-r">
                  <section id="pr-category-snippets-42436" class="" data-reactid-powerreviews=".0">
                    <section class="pr-snippet pr-category-snippet" data-reactid-powerreviews=".0.0">
                      <section class="pr-category-snippet__rating pr-category-snippet__item" data-reactid-powerreviews=".0.0.0">
                        <div class="pr-snippet-stars pr-snippet-stars-png " data-reactid-powerreviews=".0.0.0.0">
                          <div aria-hidden="true" role="radiogroup" class="pr-rating-stars" data-reactid-powerreviews=".0.0.0.0.0">
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$1"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$2"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$3"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-100-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$4"></div>
                            <div role="radio" class="pr-star-v4 pr-star-v4-50-filled" aria-checked="true" tabindex="-1" data-reactid-powerreviews=".0.0.0.0.0.$5"></div>
                          </div>
                          <div aria-hidden="true" class="pr-snippet-rating-decimal" data-reactid-powerreviews=".0.0.0.0.1">4.5</div>
                        </div>
                      </section>
                      <section class="pr-category-snippet__total pr-category-snippet__item" data-reactid-powerreviews=".0.0.1">35 Reviews</section>
                    </section>
                  </section>
                </div>
              </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>