Product Search Listing

The Product Search Listing provides a consistent format for products displaying on the General Search or Manual Search page.

<article class="u-padSides1 u-padEnds3 u-borderSilver u-borderTop u-lg-border u-lg-borderRadius u-lg-spaceTop3 u-lg-padEnds1">
      <header class="MediaObject">
          <div class="MediaObject-title">
                <div class="ProductTitle ">
                  <h2 class="ProductTitle-heading u-textWeightBold u-textSize2">
                      <a href="#" class="MediaObject-link">
                        14-kW Home Standby Generator with Milbank <mark>100</mark>-Amp Whole House Switch
                      </a>
                  </h2>
                
                  <p class="ProductTitle-model u-textDarkGray">
                    Model #75868
                  </p>
                
                </div>
          </div>
      
        <div class="MediaObject-graphic">
              <img src="/images/prototypes/generators/42436_hero-8_26_13_hi-res.jpg" alt="A yellow portable generator with black handles and details emblazoned with the Champion logo.">
        </div>
      
        <div class="MediaObject-content">
                <div class="u-spaceItems06">
                    <div class="u-textSize01">
                      [Star Rating Placeholder]
                    </div>
      
                  <ul class="ProductSearchListing-specs u-textSize01 u-listReset u-sm-listInline u-textSilver">
                      <li><span class="u-textBlack">2000W</span> <span class="u-textDarkGray">Starting</span></li>
                      <li><span class="u-textBlack">1700W</span> <span class="u-textDarkGray">Running</span></li>
                      <li><span class="u-textBlack">9.5 h.</span> <span class="u-textDarkGray">Run Time</span></li>
                      <li><span class="u-textBlack">53.0 dBA</span> <span class="u-textDarkGray">Noise Level</span></li>
                  </ul>
                </div>
        </div>
      </header>
      
        <div class="u-padTop1">
          <div class="u-spaceItems1">
              <div class="u-spaceItems02">
                <h3 class="u-textSize">
                  Operator&#x27;s Manual
                </h3>
          
                  <ul class="u-listInline u-textSize01">
              <li>
                <a href="#" hreflang="en">
                  <span class="u-hiddenVisually">
                    Operator&#x27;s Manual for All in
                  </span>
                  English
                </a>
              </li>
              <li>
                <a href="#" hreflang="es">
                  <span class="u-hiddenVisually">
                    Operator&#x27;s Manual for All in
                  </span>
                  Español
                </a>
              </li>
              <li>
                <a href="#" hreflang="fr">
                  <span class="u-hiddenVisually">
                    Operator&#x27;s Manual for All in
                  </span>
                  Français
                </a>
              </li>
          </ul>
          
              </div>
              <div class="u-spaceItems02">
                <h3 class="u-textSize">
                  Parts Information
                </h3>
          
                  <table class="Table Table--compact Table--striped u-borderSilver u-border u-textShrink1">
                    <thead>
                      <th scope="col" class="u-size2of3 u-sm-size1of2">
                        Serial Range
                      </th>
                      <th scope="col">Download</th>
                    </thead>
                      <tr>
                        <td>16DEC1000001–17JUN1001531</td>
                        <td>
                          <ul class="u-sm-listInline">
              <li>
                <a href="#" hreflang="en">
                  <span class="u-hiddenVisually">
                    Parts Information for 16DEC1000001–17JUN1001531 in
                  </span>
                  English
                </a>
              </li>
              <li>
                <a href="#" hreflang="es">
                  <span class="u-hiddenVisually">
                    Parts Information for 16DEC1000001–17JUN1001531 in
                  </span>
                  Español
                </a>
              </li>
              <li>
                <a href="#" hreflang="fr">
                  <span class="u-hiddenVisually">
                    Parts Information for 16DEC1000001–17JUN1001531 in
                  </span>
                  Français
                </a>
              </li>
          </ul>
          
                        </td>
                      </tr>
                      
                      <tr>
                        <td>17JUN1001532–18JAN1000321</td>
                        <td>
                          <ul class="u-sm-listInline">
              <li>
                <a href="#" hreflang="en">
                  <span class="u-hiddenVisually">
                    Parts Information for 17JUN1001532–18JAN1000321 in
                  </span>
                  English
                </a>
              </li>
              <li>
                <a href="#" hreflang="es">
                  <span class="u-hiddenVisually">
                    Parts Information for 17JUN1001532–18JAN1000321 in
                  </span>
                  Español
                </a>
              </li>
              <li>
                <a href="#" hreflang="fr">
                  <span class="u-hiddenVisually">
                    Parts Information for 17JUN1001532–18JAN1000321 in
                  </span>
                  Français
                </a>
              </li>
          </ul>
          
                        </td>
                      </tr>
                      
                      <tr>
                        <td>18JAN1000322+</td>
                        <td>
                          <ul class="u-sm-listInline">
              <li>
                <a href="#" hreflang="en">
                  <span class="u-hiddenVisually">
                    Parts Information for 18JAN1000322+ in
                  </span>
                  English
                </a>
              </li>
              <li>
                <a href="#" hreflang="es">
                  <span class="u-hiddenVisually">
                    Parts Information for 18JAN1000322+ in
                  </span>
                  Español
                </a>
              </li>
              <li>
                <a href="#" hreflang="fr">
                  <span class="u-hiddenVisually">
                    Parts Information for 18JAN1000322+ in
                  </span>
                  Français
                </a>
              </li>
          </ul>
          
                        </td>
                      </tr>
                      
                  </table>
              </div>
          
              <div class="u-spaceItems01">
                <h3 class="u-textSize">
                  Miscellaneous
                </h3>
          
                <ul class="u-textShrink1 u-listReset u-spaceItems06">
                    <li>
                      <a class="u-flexInline u-flexAlignItemsCenter u-flexRowReverse" href="#">
                        827899 Operator&#x27;s Manual (Winch)
                        <svg class="FileIcon FileIcon--pdf u-textShrink4 u-spaceRight06 u-pullEnds06" viewBox="-4 0 42 48" width="42" height="48">
            <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48"/>
            <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff"/>
            <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff"/>
            <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3"/>
            <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">pdf</text>
          </svg>
          
                      </a>
                    </li>
                    <li>
                      <a class="u-flexInline u-flexAlignItemsCenter u-flexRowReverse" href="#">
                        827899 Manuel de l&#x27;opérateur
                        <svg class="FileIcon FileIcon--pdf u-textShrink4 u-spaceRight06 u-pullEnds06" viewBox="-4 0 42 48" width="42" height="48">
            <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48"/>
            <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff"/>
            <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff"/>
            <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3"/>
            <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">pdf</text>
          </svg>
          
                      </a>
                    </li>
                    <li>
                      <a class="u-flexInline u-flexAlignItemsCenter u-flexRowReverse" href="#">
                        HSB Installation Manual (All Models)
                        <svg class="FileIcon FileIcon--pdf u-textShrink4 u-spaceRight06 u-pullEnds06" viewBox="-4 0 42 48" width="42" height="48">
            <polygon class="FileIcon-base" points="38 48 0 48 0 0 26 0 38 12 38 48"/>
            <polygon class="FileIcon-front" points="35 45 3 45 3 3 22 3 22 16 35 16 35 45" fill="#fff"/>
            <polygon class="FileIcon-fold" points="25 3 35 13 25 13 25 3" fill="#fff"/>
            <rect class="FileIcon-badge" x="-4" y="21" width="34" height="18" rx="3"/>
            <text class="FileIcon-label" text-anchor="middle" x="13" y="34" font-size="12" fill="#fff">pdf</text>
          </svg>
          
                      </a>
                    </li>
                </ul>
              </div>
          </div>
        </div>
      </article>