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

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

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