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 #60967
          </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 #83271
          </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 #50532
          </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 #12736
          </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 #103091
          </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 #29691
          </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 #87902
          </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>