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

Typography Code

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/typography@3.0.0-beta.0

Usage notes


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

Variants


Typography - Code
Verified

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>
<code class="spectrum-Code spectrum-Code--sizeL">CodeL Text <strong>Strong</strong> <em>Emphasis</em> </code>
<code class="spectrum-Code spectrum-Code--sizeM">CodeM Text <strong>Strong</strong> <em>Emphasis</em> </code>
<code class="spectrum-Code spectrum-Code--sizeS">CodeS Text <strong>Strong</strong> <em>Emphasis</em> </code>
<code class="spectrum-Code spectrum-Code--sizeXS">CodeXS Text <strong>Strong</strong> <em>Emphasis</em> </code>
<pre><code class="spectrum-Code spectrum-Code--sizeM">CodeM text
wrapped in
pre tags for
multiline
goodness</code></pre>