• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Typography detail

Component status
Contribution
Current version@spectrum-css/typography@6.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/typography@7.0.0-s2-foundations.15
ReleasedSeptember 17, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

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

Variants

Detail
Contribution

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>