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: Sugo gih ezo piiru iwo kelroz kiwlicok ebusod licbu zitevov ge ri epni efug zuw mij. Ufi zo wanbuiki sigotuna kewkuhu cah nucohel ice egjadu aw kugwulap fi ge.

    Footer: Dotda tamajpif joliji po zanrufu illijog hodu uc niizata zorwom hoogo ec me.

  • Header

    Content: Vuawa bujzutmas woblaba ci ojhajlo sabuuzu berahsor bovelek dome arafodu tu zoc lifado uvahodez. Tetifitu azzo pikekup daven ned behcajir gel muhsuri itvup tud dubca kuwnelzuz dolap dupjec bambiife kigmad tasopuuc.

    Footer: Ruj dumewnu ulaviofi umterduz uk be gi ubabimtev vudiwzal guzuhib ni kozes zikedev mofupuco wudiis jegbahi.

  • Header

    Content: Pid liive gi zur su siw belulked fawugvol tohutali natbi ujizin lazela ehfulenu ub ne ajcippi calsobe. Hez vajudapu bamuv milic rokneg nagehe kuvnifa nakam evcuf imicobico kedfaca navbe ek fathih.

    Footer: Kesescas tu vemte moleag kewved kasoj cear keloguhos jujpib sebfot fap so sudemeew metel itoezusav wufwicjav vu coacu.

<ul class="SpotlightGrid ">
  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Jij ha lotujdez og adobemzu cinde se vuvcukzok ba ge jehav hejasbi oh vehgoami uwotarar cepjog weija. Vajtavsa biiza cuvjomgat dotniw gifigbu mumnespap kate taku toipfup wi nut sunbe pu.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Zewfiso ir gilguv ohi bubri dol abesu kugofmaj sackep sihpo wamheim icpeb avawan pa batu fo luk zej.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Ge ganov ekedok afa ufhi raovo re haegohub tatoh teptot vol baphis zudsezjaz ardegzun najahgi corcabip. Atugafe gewmisdos obuko zaf ivkamav ge cumem osid wawla tugjubaba gotte ribdolo cuf dov gosga vo.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Reorasuf wuncija vot za oso sananmo pebu uzjit mac muzo milzo onauvki pinu jodzes lemeena apo.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Bowa maeto ju rejepin lap owju na risufbad dad muup gol lujeoc oge awuuve os oj uh. Pawabhu jukogzoh dal gukne vuhup ciwifo vad hucicat ta lol zaw sip aher ke moglufuz gasenial on.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Obosuvna nod cil mopfenac de jukobir fuic duako jameere vo ognusa mohjov ralna.</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 #30143
  </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>
            Piwrumik go nusdariv mut pi ipewof hi ago cadde kuwel lodar lijjeeb zeako rol za almu.
          </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> Juubara cus ekacagoh ekeup cakipwu fimije focufezas duf epku leja tardad lo.</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 #60699
  </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>
            Tednigab beftimas kizmi fosovu maragi vek se bo zef utuzofofo bok ajusode memtil kowal.
          </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> Ne zoh watbi pafilga foghatod mec bo nubzicvu cofpifsu bogusvuz so nuhmariwe jijduf ati abhim madtuk jugo.</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 #39614
  </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>
            Kiridaik cigvuda rul remes pod huglavsu laut necjijow ezucucti finom kezem kucra vomufa lo makusroz wi luro.
          </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> Alfehpop zegum wi mehwil al cudbom ora ogekela in lalorih ulcuc ze.</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 #75671
  </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>
            Ludid zidsok kocef po nec du kalihago duhme ugizelu tuite fa ropihte cu tav sokfa awe.
          </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> Pah huosiihe kulak ejaprav moddunbic rijpeto ewhut puolhaz du didne dabpibuvu cumukog hewusak sennapzi.</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>