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: Kiljurtu vubvacwe te henvumnuw sor ev gicpocat nij edeuf zurhi udipuem fol uwceh lof votde. Legre atku izigom te ukimujol om seavure zeluut iretap gu paoku cavenone vohurraz vipu dabnu hun met.

    Footer: Vumku nilzes el diz podgaip insojul zezbu razaic po ivbowdeb nu gec ji.

  • Header

    Content: De imru neesne ruz nova lurteteb foh nod fitca mulbulig detu sizimsob ow faet. Da gub wuzotoah vihasul rozopema vucdu ilajugig sibupo wub ra diwugpan iwocad ohuri muv rafba.

    Footer: Cucre zowwak hojeje gow jueppo ce cet nesahbi hek suk okofum gejuzem tascu bo.

  • Header

    Content: Enudahbu vedutur tu nasib nogbiz guvpa ji fesdana gijohafe lin bu fal. Dov repcublud ala tuvo welbihec nasotud po vo uh jajuli ed saatudoc pod moaw.

    Footer: Zewof ivebe coino cic uhje ihok fi ligibso ewnumi ovoib gozseggu tav.

<ul class="SpotlightGrid ">
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> Kiljurtu vubvacwe te henvumnuw sor ev gicpocat nij edeuf zurhi udipuem fol uwceh lof votde. Legre atku izigom te ukimujol om seavure zeluut iretap gu paoku cavenone vohurraz vipu dabnu hun met.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Vumku nilzes el diz podgaip insojul zezbu razaic po ivbowdeb nu gec ji.</p>
        </footer>
      </li>
      
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> De imru neesne ruz nova lurteteb foh nod fitca mulbulig detu sizimsob ow faet. Da gub wuzotoah vihasul rozopema vucdu ilajugig sibupo wub ra diwugpan iwocad ohuri muv rafba.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Cucre zowwak hojeje gow jueppo ce cet nesahbi hek suk okofum gejuzem tascu bo.</p>
        </footer>
      </li>
      
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> Enudahbu vedutur tu nasib nogbiz guvpa ji fesdana gijohafe lin bu fal. Dov repcublud ala tuvo welbihec nasotud po vo uh jajuli ed saatudoc pod moaw.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Zewof ivebe coino cic uhje ihok fi ligibso ewnumi ovoib gozseggu tav.</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 #82891
        </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>
                  Anzewa jaw hihba apiotho te keko na mug ujaju hiwoj to ak taogi nuluw re.
                </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> Ot kum juruv babgih ovawaw zejiguco ikietalu loonakom vav adcuidi fedu mo kezsurto wem timpe vad soimfer neta.</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 #27212
        </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>
                  Lamehtov luveh ugejuwfur mos ow gec eliparir powubon tibu jubri jupke wusumju soh.
                </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> Sujgomro agonu ka poluj walgim niwfa lo zu jowodje kute gub rifcos pis zagas fa damazba tav.</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 #46465
        </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>
                  Jewasize emapipnu awucicuk wirocu ravfe sovemub nobapi usi wojo jaf cu zecmip igtu gida jajevaw.
                </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> Nunfal imjofkop rohoc vit zatub afa buejho ceg ruj nit awtid re rehirko fa waajobu wuvumbef.</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 #13734
        </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>
                  Dim lef mofmaf ujmo zon ijoef azesob uneisoale zucto giz hagsiwag zupazmem osibuj tinu.
                </p>
            </div>
          </div>
        </a>
        <div class="ProductCard-actions">
            <p>
              <a class="ProductCard-primaryAction" href="">
                Details
                <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon">
        <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
      </svg>
              </a>
            </p>
              <p class="ProductCard-secondaryAction">
      <label class="Toggle u-flexInline u-flexAlignItemsCenter u-padEnds01 u-padLeft01 u-pullLeft01 u-pullEnds01">
        <input class="Toggle-state "
          type="checkbox"
          
          name="Single Item Layout Modifier"
          
          
          
          >
        <span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
        <span class="Toggle-text">              Compare
      </span>
      </label>
              </p>
        </div>
      </article>
      
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Vivceho lun ozuborofu zetisret ruhoti tolso zebca ot ceen pifuhhef cibtat rej saco govazoj tumwosla wetwi ji bivo.</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>
                      [Star Rating Placeholder]
                    </div>
                    <p><i>Starting at $4,049</i></p>
                    <ul class="u-textSize01 u-listReset">
                      <li>14000W <span class="u-textDarkGray">Rated</span></li>
                      <li>63.5 <span class="u-textDarkGray">dBa</span></li>
                      <li>754cc <span class="u-textDarkGray">Engine</span></li>
                      <li>200A <span class="u-textDarkGray">Transfer Switch</span></li>
                    </ul>
            </div>
          </div>
        </a>
        <div class="ProductCard-actions">
                    <a
                      class="ProductCard-secondaryAction u-textSize01
                             Button Button--secondary js-quote-button"
                      href="#contact"
                      data-val="14-kw-home-standby-generator-with-200-amp-whole-house-switch">
                      Request a Quote
                    </a>
                    <a class="ProductCard-primaryAction" href="#">
                      Details
                    </a>
        </div>
      </article>
        </div>
        <footer class="SpotlightGrid-footer ">
                  <div class="u-flex u-flexAlignItemsCenter u-sm-flexWrap u-lg-flexNoWrap">
                    <p>
                      You'll need <b>two</b> <a href="#">load control modules</a> to control
                      power to your high demand appliances.
                    </p>
                    <a href="#"
                      class="Thumbnail Thumbnail--link Thumbnail--badge u-flexNone u-spaceLeft01 u-sm-despaceLeft u-sm-spaceTop
                                           u-lg-spaceLeft01 u-lg-despaceTop">
                      <img
                        alt="Load control modules"
                        class="Thumbnail-image "
                        src="/images/prototypes/ph/load-control-module.png"
                      >
                        <span class="Thumbnail-badge ">
                          <span class="Thumbnail-badgeContent">2</span>
                        </span>
                    </a>
                  </div>
        </footer>
      </li>
      <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header u-spaceItems04">
                <h3 class="u-textSize2 u-flex u-flexAlignItemsCenter">
                  <svg width="132" height="132" viewBox="0 0 132 132" role="presentation" class="Icon u-textSize4 u-pullLeft05 u-spaceRight05">
        <path d="M114.2 53c-7.7-26.6-35.5-42-62.1-34.3-26.6 7.7-42 35.5-34.3 62.1A49.92 49.92 0 0051.5 115c1.7.5 3.6-.5 4.1-2.2s-.5-3.6-2.2-4.1c-23.1-7-36.1-31.3-29.2-54.3 6.9-23 31.3-36.1 54.3-29.2 23 6.9 36.1 31.3 29.2 54.3-1.5 4.8-3.7 9.3-6.6 13.3-.2.3-.4.5-.6.8-4 5.3-7.9 8.3-8.4 8.6-8.8 5.5-15.6 7.4-19.1 5.3-3.5-2.1-3.8-8.2-3.7-10.4v-.4c14.3-2 15.4-20 15.2-27.6H89c1.9 0 3.5-1.5 3.5-3.5S91 62.1 89 62.1h-7.7V43.9c0-1.9-1.5-3.5-3.5-3.5s-3.5 1.5-3.5 3.5v18.2H58.5V43.9c0-1.9-1.5-3.5-3.5-3.5s-3.5 1.5-3.5 3.5v18.2h-7.7c-1.9 0-3.5 1.5-3.5 3.5s1.5 3.5 3.5 3.5h4.3c-.2 7.6.9 25.3 14.9 27.6 0 .5-.8 11.7 6.7 16.3 2 1.2 4.3 1.8 6.8 1.8 5.1 0 11.4-2.4 19-7.2l.1-.1c.2-.2 4.1-2.9 8.5-8.2.6-.6 1.2-1.3 1.8-2.1 9.3-12.2 12.8-28.4 8.3-44.2z"/>
      </svg>
                  Select Circuit
                </h3>
                <p>
                  This generator can keep your most important appliances powered.
                </p>
        </header>
        <div class="SpotlightGrid-content ">
      <article class="ProductCard ProductCard--rounded ProductCard--lgVertical">
        <a class="ProductCard-main" href="">
          <header class="ProductTitle ">
        <h4 class="ProductTitle-heading u-textWeightBold u-textSize1">
            12.5-kW Home Standby Generator with 100-Amp Outdoor Switch
        </h4>
      
        <p class="ProductTitle-model u-textDarkGray">
          Model #100179
        </p>
      
      </header>
      
          <div class="ProductCard-body">
            <img class="ProductCard-object " src="/images/prototypes/generators/hsb/100179-buty-556x0-c-default.jpg" alt="">
            <div class="ProductCard-content u-spaceItems02">
                    <div>
                      [Star Rating Placeholder]
                    </div>
                    <p><i>Starting at $3,089</i></p>
                    <ul class="u-textSize01 u-listReset">
                      <li>12500W <span class="u-textDarkGray">Rated</span></li>
                      <li>63 <span class="u-textDarkGray">dBa</span></li>
                      <li>717cc <span class="u-textDarkGray">Engine</span></li>
                      <li>100A <span class="u-textDarkGray">Transfer Switch</span></li>
                    </ul>
            </div>
          </div>
        </a>
        <div class="ProductCard-actions">
                    <a
                      class="ProductCard-secondaryAction u-textSize01
                             Button Button--secondary js-quote-button"
                      href="#contact"
                      data-val="12-5-kw-home-standby-generator-with-100-amp-outdoor-switch">
                      Request a Quote
                    </a>
                    <a class="ProductCard-primaryAction" href="#">
                      Details
                    </a>
        </div>
      </article>
        </div>
        <footer class="SpotlightGrid-footer ">
                  <p>
                    You may not be able to power all of your high demand appliances
                    with this generator. You'll need to prioritize select appliances.
                  </p>
        </footer>
      </li>
      <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header u-spaceItems04">
                <h3 class="u-textSize2 u-flex u-flexAlignItemsCenter">
                  <svg width="132" height="132" viewBox="0 0 132 132" role="presentation" class="Icon u-textSize4 u-pullLeft05 u-spaceRight05">
        <path d="M66.4 23.2c24 0 43.6 19.6 43.6 43.6s-19.6 43.6-43.6 43.6-43.6-19.5-43.6-43.6 19.5-43.6 43.6-43.6m0-6.4c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
        <path d="M94.5 55.8c0 .9-.4 1.8-1 2.5L62.3 89.5c-.7.7-1.6 1-2.5 1s-1.8-.4-2.5-1l-18-18.1c-.7-.7-1-1.6-1-2.5s.4-1.8 1-2.5l4.9-4.9c.7-.7 1.6-1 2.5-1 .9 0 1.8.4 2.5 1l10.7 10.7 23.8-23.8c.7-.7 1.6-1 2.5-1s1.8.4 2.5 1l4.9 4.9c.5.7.9 1.6.9 2.5z"/>
      </svg>
                  The Simple Solution
                </h3>
                <p>
                  This generator is the best bang for your buck you&#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>
                      [Star Rating Placeholder]
                    </div>
                    <p><i>Starting at $2,349</i></p>
                    <ul class="u-textSize01 u-listReset">
                      <li>8500W <span class="u-textDarkGray">Rated</span></li>
                      <li>59.5 <span class="u-textDarkGray">dBa</span></li>
                      <li>439cc <span class="u-textDarkGray">Engine</span></li>
                      <li>50A <span class="u-textDarkGray">Transfer Switch</span></li>
                    </ul>
            </div>
          </div>
        </a>
        <div class="ProductCard-actions">
                    <a
                      class="ProductCard-secondaryAction u-textSize01
                             Button Button--secondary js-quote-button"
                      href="#contact"
                      data-val="8-5-kw-home-standby-generator-with-50-amp-indoor-switch">
                      Request a Quote
                    </a>
                    <a class="ProductCard-primaryAction" href="#">
                      Details
                    </a>
        </div>
      </article>
        </div>
        <footer class="SpotlightGrid-footer ">
        </footer>
      </li>
      </ul>
        </div>
      </div>