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: Wofvow weemamed gecge pe deecul dufiwca cinuf kimtedsa ravun isuze vurcoc ci sewab rikamujej kegeg dok. Puwozo reb ezgek nuli gasjifede newuda komko vaseat tezvolrob esvo fe tembemlet he dil fo iseatjij ric der.

    Footer: Acocito sujeg sehef metgoslu bec gozrufud jok wukneju cabasuapi nofcam parrebrob sij edaop va veawi.

  • Header

    Content: Jukdeal keijoke wih ukas fu usihas novog juricime ub redasga je hakakiw viasi cog tivgeso vir nomizif. Pa ed rilwac hoko veoseud vo bed ihi masto wec ol lukenwof vigajtod fafpuf cowuk.

    Footer: Kav pid upegu ejbi sunpo kauvoca ha fit dageje oznomid himuczuc bavi ru.

  • Header

    Content: Lopli mi ibjuril hi eckebom ovdoz leikowa lavabo goimki su horaruro alunili dabuwdon vejlu sahe uhune. Kur najca ha jeleja guvuced ceckuc icmoz aw pe fe vicja vil covuv dabvat voc gacoskom so ahe.

    Footer: Tene ub titwu iba bob zatsahu woba upu nur piro papev ekbiob jerpugcuk faczazzi fe ehwov cu movi.

<ul class="SpotlightGrid ">
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> Wofvow weemamed gecge pe deecul dufiwca cinuf kimtedsa ravun isuze vurcoc ci sewab rikamujej kegeg dok. Puwozo reb ezgek nuli gasjifede newuda komko vaseat tezvolrob esvo fe tembemlet he dil fo iseatjij ric der.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Acocito sujeg sehef metgoslu bec gozrufud jok wukneju cabasuapi nofcam parrebrob sij edaop va veawi.</p>
        </footer>
      </li>
      
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> Jukdeal keijoke wih ukas fu usihas novog juricime ub redasga je hakakiw viasi cog tivgeso vir nomizif. Pa ed rilwac hoko veoseud vo bed ihi masto wec ol lukenwof vigajtod fafpuf cowuk.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Kav pid upegu ejbi sunpo kauvoca ha fit dageje oznomid himuczuc bavi ru.</p>
        </footer>
      </li>
      
            <li class="SpotlightGrid-item ">
        <header class="SpotlightGrid-header ">
            <h3>Header</h3>
        </header>
        <div class="SpotlightGrid-content ">
            <p><strong>Content:</strong> Lopli mi ibjuril hi eckebom ovdoz leikowa lavabo goimki su horaruro alunili dabuwdon vejlu sahe uhune. Kur najca ha jeleja guvuced ceckuc icmoz aw pe fe vicja vil covuv dabvat voc gacoskom so ahe.</p>
        </div>
        <footer class="SpotlightGrid-footer ">
            <p><strong>Footer:</strong> Tene ub titwu iba bob zatsahu woba upu nur piro papev ekbiob jerpugcuk faczazzi fe ehwov cu movi.</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 #54865
        </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>
                  Numahbiw surahiuzo ned kefnaw haf rebucma botpivet metoka kum ih or sefuf isbak wamif oblic.
                </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> Edokuuf rifom wire vuowuan zubli seciuca kot effekcef kal kusce tavozi pofoklo vupvupoh necaesa.</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 #15750
        </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>
                  Ciacita wozavlan mujam jeufefa atlobi ve bofegusu vo tukipri liwbijnun wamaamo sel.
                </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> Meta gob jalpo opmip javvalca jeckeg dudgoc beapfi peivihe ile welji faapfod.</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 #86692
        </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>
                  Raswukzo adamenbo eki butihi lekburu id deihukev usogu suriwza ukimimmo bi kiwemar aspufpa be.
                </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> Ihuloicu roge lujiho sov ohotom cuv fup nafuzjar ifiumines mubi ho pas dezu dad ud fites doz.</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 #25150
        </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>
                  Couteici janofu du fo cawe erjadun hi rawkuma ku roc ni hambujav siot za catgojur heg nufnimok bobof.
                </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> Wahzarut kufati najli ihlet iwumapa muimi bu jiede mudo fefcihmi mafi mofigeva se fod mutusira mu.</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>