Detail
Usage notes
Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.
DetailL DetailL Emphasis DetailL Light DetailL Strong.
DetailM DetailM Emphasis DetailM Light DetailM Strong.
DetailS DetailS Emphasis DetailS Light DetailS Strong.
DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.
DetailL DetailL Emphasis DetailL Light DetailL Strong.
DetailM DetailM Emphasis DetailM Light DetailM Strong.
DetailS DetailS Emphasis DetailS Light DetailS Strong.
Toggle markup
<p class="coral-Detail coral-Detail--XL">DetailXL <em>DetailXL Emphasis</em> <span class="coral-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
<p class="coral-Detail coral-Detail--L">DetailL <em>DetailL Emphasis</em> <span class="coral-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
<p class="coral-Detail coral-Detail--M">DetailM <em>DetailM Emphasis</em> <span class="coral-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
<p class="coral-Detail coral-Detail--S">DetailS <em>DetailS Emphasis</em> <span class="coral-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
<br>
<p class="coral-Detail coral-Detail--XL coral-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <span class="coral-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
<p class="coral-Detail coral-Detail--L coral-Detail--serif">DetailL <em>DetailL Emphasis</em> <span class="coral-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
<p class="coral-Detail coral-Detail--M coral-Detail--serif">DetailM <em>DetailM Emphasis</em> <span class="coral-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
<p class="coral-Detail coral-Detail--S coral-Detail--serif">DetailS <em>DetailS Emphasis</em> <span class="coral-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>