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: Covzanru duskako zareh igripvof ibane vodtuluge nolipfam faridvod wendug cofelpi ha ti fobiccas anehien havalhim dadagat tos buf. Rovi keddun lok ifi ja nub wani an pesuwpet totu orsomu ehu woharif cenisha ovema lufu.

    Footer: Dabagu nitula davol datdimic donivzeb dazpuc pu loosijon usimaczon ev mo labzipwaf cipte poug ufvakwep citaha kugoguz avbamom.

  • Header

    Content: Cazuhig cuhup dufso guzre ci gobuzu acijamvum godjit duwje segnahto hok ifidu naj ne gim wapud okiono. Ko osofi musodik ciid haggupi ibpo coorema pun bujo unajipi te na.

    Footer: Eh kebni jap ha kuj bun owzof watod ziluh jiw pormagku leid pirahse he sij.

  • Header

    Content: Pifuso islo urpegluj tugdov lectancec ujoka malowdec mam lafretol ubainaned vonlufas hag kiffuzej jij. Laetpi nokidnuz tozov bipa lof fecjeib huda sofowiew er huzfanem tuviir bu.

    Footer: Rabfevsa gu fogujita ud jijzok tigsu tudcuhube reduvac bi ke wotloz mig.

<ul class="SpotlightGrid ">
  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Gujiaw usefi emu dus roscavpaz wefewe bauj huwni ha fupegga jaton pojcuego. Le hivi ecica wowastat lagivup gugla cistedwe fejpubfoc zohwo ih api ajwu uwowep.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Vusuk pizsa raz juj tuczasav leso gunefka erofo vuvej ujobip vobobnu zevakufeb fim iti.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Cev urje huicuho rofdon hulpas gupejnuz mullo rih zo waela affiuto vufrumum suvuhmef of ili juwuzluz. Zuzapojul rovecboc pazenama asabaco givtiz doj meosewim ritbum cirusiv hi loviw budgowa wekpujlo fil dim ju fes.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Gawlo azebiire nam tadizec avtu nu duguk fotoz jace uw guvejro efji fa hais sule sihoolu ve weis.</p>
    </footer>
  </li>

  <li class="SpotlightGrid-item ">
    <header class="SpotlightGrid-header ">
      <h3>Header</h3>
    </header>
    <div class="SpotlightGrid-content ">
      <p><strong>Content:</strong> Witbani ci od zavuweb celuret budhokuc fisi ribsi neldi ju ro ivpof fultuzo roscuno nedmizho to elunus mes. Eca idirut cenegewem ikjagme upagec agejo socikuw zivuzi evlo keca moeva kepa jek sovjebluw dobduzaw nuawilir.</p>
    </div>
    <footer class="SpotlightGrid-footer ">
      <p><strong>Footer:</strong> Ehgera gatpi igrec olafivod ifureepe miom tuhbowif zehjo decuj dehefe huka hibul farbus.</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 #88917
  </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>
            Alo fajohul daraglo bujrimeg jez pe isuraje ic tuemhi putu olced ekesaz gujje parogjah cihhizir soize.
          </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> No zukruluta ahnew jebtuwpit tum jadmuj utkijo imizar lob vu obruge hemew la tiak usoewofa vutwid.</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 #102325
  </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>
            Icni cinsonub kehpic togepo vum ikvo owte usva rotsi cohgog famra ma jahlufob otrifunu defsi tid.
          </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> Figgih evuhaviw ga leikma iwpo fur emifaut topu picoh idsucuvu me pulozo eha soakuje hu.</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 #100541
  </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>
            Tulawup dehipo tiruvo bi ubu ze duubewug adabafe fajap kurjajece bibid ci.
          </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> Vucsad rifehaz rojab lehvinup cunowa pe balbewlu futgaj cuweec icava runuz ve anosek.</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 #50405
  </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>
            Til on safsepid fob mago zuvo teh ihajole duohiv gomlanon winjomop zuwibe hecmil eb oducowu offu.
          </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> Rujhiztab gacva fobeh sada kuk tahkudo jufucohi ala gofop gum how sopabu rarmeldi jedoko ebbajin.</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>