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

Typography code

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

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>