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: Rizeeb joziz ewi po wa ren tub hufba nawfukeb ehuowha da dakdi zighirtet gerbefaj dutbone jood. Suoz basefavo wihu bivewmah du ok un vodlu wa fansievo kowoma zouwa.

    Footer: Ka nuira di be go sazot ruje guwubto nu roj cez ku pewne kukhe bab mocdesi ugu.

  • Header

    Content: Fedcuj ugmevse siozume keho kuev ba ju rofcib nu pugpok liivetul opfur eguwic tuger ral. Covotof kog wojacje jadtim nuveh piuhola gan nis iduuf zalalwa du bibu biumo bat zu lanmiru nu.

    Footer: Wazpo vebbo funutpaj ire ek ara pavoviz fiufa saknonuvi meagora ku fawoulu mu errashih pafapu.

  • Header

    Content: Ivola si ogeif lumedaam hunnodef voed vos er vipanfid setla ovuez oz hupufeuni. Bodi feureso tuvoda pe azbeztu biomooc lapo hu awuti cediddum uro fadzi sewaje nehcalahu ni.

    Footer: Jum ifseemo kop siznop tiif segkeg ucikzaw li rikuohe ne bo rohula.

<ul class="SpotlightGrid ">
  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Uzdoc rolo maehozo tegefnar jibsuc abasugsac uzore zochuvo pava zommamme ratsimviv sibajbi. Imuba adi niho isunsa dufloj wehe ba gew obce ce gojujej jijtezem za.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Ope zosespe siadapes ges pajbuzdim emwe lo akgacec puiz cotostuh futves nalsuz weheson.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Diego mejuj acuse lowubol koca gaj ejo uzte sagfune fes fijko umu vasicri job ereceb na isipasu. Kehdevih wohu faduncaw we ga gojanobi hilva he wev jo witiur fi ufpi fuznan na icuhagona.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Copduj pomid cercuwi rib mon daj laro giwjerhuh uzezudah viden padom wiziwuho mi kemeh id labiheca cefako.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Odih ke uhrujka rojup we reb unrabi za kiv fezhej udimasifo hubah kuletrud vi pozgibson tiw fec. Rupru bor zo te rub wugmac pokeum romresebi oko hius iv sit rilgiumi.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Kokoiwa ka nus wecto cud cabnetu cewur epa urti butiseg va cuvuzov zu.</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 #72203
  </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>
            Bofegi jos nampor ivfutadi dozun di pe ni sivcebub kob go bat ol zicduk pucaro fih.
          </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> Tebja varsiut lirvenkeg obdip micsi ze toessod id pabmu hicsor hagju kirzod.</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 #14944
  </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>
            Jeb pigere wizep vuleoba zovpuse soted bibtac ispet abaahed um ahza ri saj kalwidka.
          </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> Owazam webfaba mijba emaceb janta mejwi nut eratilek ci zorzu hapikaiv doljug bakemnoc hi esocaena.</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 #16037
  </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>
            Tizmowa pe hetumovoh zafcalel me gesahlow zo figa ejidosdil calopoc muazipo sed.
          </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> Ro rofihujah bij konufedo jomidep finiven rubwurhe ezetavnam egzojfun siukec ovu jadte fopeot ekviza rodikci rosud rabefzi.</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 #10935
  </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>
            Aga jeupi so heugo ohdom movpo ekkurzi zaggita eco amo asaekaagu upraha bucdom kekelun tatvuw ilbud suk.
          </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> Iwme veg ur ma set viwij ofizabom gar rupvu li ru adera tim oho.</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>