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 #34606

  • US
  • CA 
<header class="ProductTitle ">
        <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
            Default
        </h4>
      
        <p class="ProductTitle-model u-textDarkGray">
          Model #34606
        </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 #51205

  • US
  • CA 
<header class="ProductTitle">
        <h4 class="ProductTitle-heading">
          Region Alternative
        </h4>
        <p class="ProductTitle-model u-textDarkGray">
          Model #51205
        </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
85567
Serial
97222
  • 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">85567</dd>
          <dt class="ProductTitle-detailTitle">Serial</dt>
          <dd class="ProductTitle-detailContent">97222</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>