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

  • US
  • CA 
<header class="ProductTitle ">
  <h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
      Default
  </h4>

  <p class="ProductTitle-model u-textDarkGray">
    Model #80697
  </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 #25916

  • US
  • CA 
<header class="ProductTitle">
  <h4 class="ProductTitle-heading">
    Region Alternative
  </h4>
  <p class="ProductTitle-model u-textDarkGray">
    Model #48896
  </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>