• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Typography Detail

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/typography@3.0.0-beta.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.

Show markup
<div class="spectrum">
  <p class="spectrum-Detail spectrum-Detail--sizeXL">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeL">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeM">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
  <p class="spectrum-Detail spectrum-Detail--sizeS">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--sizeXL 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--sizeL 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--sizeM 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--sizeS spectrum-Detail--serif">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
</div>