Product Summary

Default

This is a combination of the Product Title component (using the Product Summary Alternate modifier), the Panel component (with multiple content blocks), and a Grid layout.

Product Title Goes Here

Model
555123
Serial
ABC00000012345

A Different Product Title Goes Here

Model
555321
Serial
ABC00000056789
<section class="Panel">
        <div class="Panel-content">
          <div class="Grid Grid--compact">
            <div class="Grid-cell u-sizeThumbnail u-sizeFit u-boxSizingContent">
              <img src='/images/prototypes/generators/100105_buty_6-6-14_hi-res.jpg' alt="">
            </div>
            <div class="Grid-cell u-sizeFill u-padTop06 u-padLeft04">
              <div class="ProductTitle ProductTitle--summary ">
        <h4
          class="ProductTitle-heading u-textWeightBold u-textGrow1">
            Product Title Goes Here
        </h4>
      
        <dl class="ProductTitle-details u-textShrink1 u-spaceTop06">
          <dt class="ProductTitle-detailTitle">Model</dt>
          <dd class="ProductTitle-detailContent">555123</dd>
          <dt class="ProductTitle-detailTitle">Serial</dt>
          <dd class="ProductTitle-detailContent">ABC00000012345</dd>
        </dl>
      
      </div>
      
            </div>
          </div>
        </div>
        <div class="Panel-content">
          <div class="Grid Grid--compact">
            <div class="Grid-cell u-sizeThumbnail u-sizeFit u-boxSizingContent">
              <img src='/images/prototypes/generators/1_large-6.jpg' alt="">
            </div>
            <div class="Grid-cell u-sizeFill u-padTop06 u-padLeft04">
              <div class="ProductTitle ProductTitle--summary ">
        <h4
          class="ProductTitle-heading u-textWeightBold u-textGrow1">
            A Different Product Title Goes Here
        </h4>
      
        <dl class="ProductTitle-details u-textShrink1 u-spaceTop06">
          <dt class="ProductTitle-detailTitle">Model</dt>
          <dd class="ProductTitle-detailContent">555321</dd>
          <dt class="ProductTitle-detailTitle">Serial</dt>
          <dd class="ProductTitle-detailContent">ABC00000056789</dd>
        </dl>
      
      </div>
      
            </div>
          </div>
        </div>
      </section>