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

Typography code

Component status
Contribution
Current version@spectrum-css/typography@6.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/typography@7.0.0-s2-foundations.13
ReleasedAugust 2, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

Code is a typography component used for text that represents code.

Variants

Typography - Code
Contribution

Typographic styles for computer code.

CodeXL Text Strong Emphasis
CodeL Text Strong Emphasis
CodeM Text Strong Emphasis
CodeS Text Strong Emphasis
CodeXS Text Strong Emphasis 

CodeM text
wrapped in
pre tags for
multiline
goodness
Show markup
<code class="spectrum-Code spectrum-Code--sizeXL">CodeXL Text <strong>Strong</strong> <em>Emphasis</em> </code>

<br>

<code class="spectrum-Code spectrum-Code--sizeL">CodeL Text <strong>Strong</strong> <em>Emphasis</em> </code>

<br>

<code class="spectrum-Code spectrum-Code--sizeM">CodeM Text <strong>Strong</strong> <em>Emphasis</em> </code>

<br>

<code class="spectrum-Code spectrum-Code--sizeS">CodeS Text <strong>Strong</strong> <em>Emphasis</em> </code>

<br>

<code class="spectrum-Code spectrum-Code--sizeXS">CodeXS Text <strong>Strong</strong> <em>Emphasis</em> </code>

<br>
<br>

<pre><code class="spectrum-Code spectrum-Code--sizeM">CodeM text
wrapped in
pre tags for
multiline
goodness
</code></pre>