Product Title
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 #36749
<header class="ProductTitle ">
<h4 class="ProductTitle-heading u-textWeightBold u-textSize2">
Default
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #35020
</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>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 #66509
<header class="ProductTitle">
<h4 class="ProductTitle-heading">
Region Alternative
</h4>
<p class="ProductTitle-model u-textDarkGray">
Model #71461
</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>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
- 73311
- Serial
- 108591
<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">47560</dd>
<dt class="ProductTitle-detailTitle">Serial</dt>
<dd class="ProductTitle-detailContent">28098</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>