Product Mention

Default

The Product Mention pattern represents a product in the context of secondary content, such as an alternative product suggestion or list of accessories. It foregoes a lot of the content and features of Product Cards in favor of simplicity.

<article class="ProductMention  u-textShrink1">
  <div class="ProductMention-content">
    <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
    <p class="ProductMention-meta u-textDarkGray">
      Model #108334
    </p>
  </div>
  <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%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="">
</article>

Extra Content

Product Mentions may optionally include a single block of extra content, such as a star rating.

<article class="ProductMention  u-textShrink1">
  <div class="ProductMention-content">
    <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
    <p class="ProductMention-meta u-textDarkGray">
      Model #17288
    </p>
    <div class="ProductMention-extra">
      (Rating, etc.)

    </div>
  </div>
  <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%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="">
</article>

Reverse

The ProductMention--reverse modifier reverses the order of the image and content.

<article class="ProductMention ProductMention--reverse u-textShrink1">
  <div class="ProductMention-content">
    <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
    <p class="ProductMention-meta u-textDarkGray">
      Model #40368
    </p>
    <div class="ProductMention-extra">
      (Rating, etc.)

    </div>
  </div>
  <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%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="">
</article>

Sizes

The ProductMention--small and ProductMention--large modifiers adjust the size of the image.

<article class="ProductMention ProductMention--small u-textShrink1">
  <div class="ProductMention-content">
    <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
    <p class="ProductMention-meta u-textDarkGray">
      Model #47347
    </p>
  </div>
  <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ESmall%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
</article>

  <article class="ProductMention  u-textShrink1">
    <div class="ProductMention-content">
      <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
      <p class="ProductMention-meta u-textDarkGray">
        Model #17694
      </p>
    </div>
    <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EDefault%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
</article>

    <article class="ProductMention ProductMention--large u-textShrink1">
      <div class="ProductMention-content">
        <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
        <p class="ProductMention-meta u-textDarkGray">
          Model #17474
        </p>
      </div>
      <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3ELarge%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
</article>

Space Content

The ProductMention--spaceContent modifier adds space between content elements. This can improve alignment of adjacent Product Mentions in a grid.

<article class="ProductMention ProductMention--spaceContent ProductMention--large u-textShrink1">
  <div class="ProductMention-content">
    <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
    <p class="ProductMention-meta u-textDarkGray">
      Model #79226
    </p>
    <div class="ProductMention-extra">
      (Rating, etc.)

    </div>
  </div>
  <img class="ProductMention-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%22200%22%20viewBox%3D%220%200%20200%20200%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%2240%22%20dy%3D%2216%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="">
</article>