Typography Detail

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/typography@2.0.0

Usage notes#


Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.

Variants#


Detail#
Verified

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.

<div class="spectrum">
  <p class="spectrum-Detail spectrum-Detail--XL">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--L">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--M">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--S">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
  </br/>
  <p class="spectrum-Detail spectrum-Detail--XL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--L spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--M spectrum-Detail--serif">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--S spectrum-Detail--serif">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
</div>
Show markup