- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Typography detail
Component status | Contribution |
---|---|
Current version | @spectrum-css/typography@6.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/typography@7.0.0-s2-foundations.17 |
Released | October 4, 2024 |
Usage notes
Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
Variants
DetailContribution
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>