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">

            <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>

          <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>