Product Title

Default

Useful within Compare and ProductCard components, the ProductTitle component maintains the correct semantic hierarchical order of elements while arranging product name, model number and/or region flags in an attractive manner.

Default

Model #82162

  • US
  • CA 
<header class="ProductTitle ">
        <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
            Default
        </h4>
      
        <p class="ProductTitle-model u-textDarkGray">
          Model #82162
        </p>
      
          <ul class="ProductTitle-flags">
              <li>
                <img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
              </li>
              <li>
                <img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
              </li>
          </ul>
      </header>

Region Alternative

Useful within Compare and ProductCard components, the ProductTitle component maintains the correct semantic hierarchical order of elements while arranging product name, model number and/or region flags in an attractive manner.

Region Alternative

Model #107830

  • US
  • CA 
<header class="ProductTitle">
        <h4 class="ProductTitle-heading">
          Region Alternative
        </h4>
        <p class="ProductTitle-model u-textDarkGray">
          Model #107830
        </p>
        <ul class="ProductTitle-flags">
            <li>
              <img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
            </li>
            <li>
              <img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
            </li>
        </ul>
      </header>

Product Summary Alternative

Useful in the Product Summary composition, where it makes less sense for the model number to be above the title, since we show a serial as well.

Product Summary Alternative

Model
40530
Serial
88868
  • US
  • CA 
<header class="ProductTitle ProductTitle--summary ">
        <h4
          class="ProductTitle-heading u-textWeightBold u-textGrow1">
            Product Summary Alternative
        </h4>
      
        <dl class="ProductTitle-details u-textShrink1 u-spaceTop06">
          <dt class="ProductTitle-detailTitle">Model</dt>
          <dd class="ProductTitle-detailContent">40530</dd>
          <dt class="ProductTitle-detailTitle">Serial</dt>
          <dd class="ProductTitle-detailContent">88868</dd>
        </dl>
      
          <ul class="ProductTitle-flags">
              <li>
                <img src="/images/icons/flags/us.svg" alt="US" class="Flag ProductTitle-flag" width="24" height="16">
              </li>
              <li>
                <img src="/images/icons/flags/ca.svg" alt="CA" class="Flag ProductTitle-flag" width="24" height="16">
              </li>
          </ul>
      </header>