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>