Span

Demos

For more detailed examples of every prop, see the Paragraph demos.

Basics

Here is a paragraph with a x-small word and some medium weight text in it.

Heading 4 with x-large word

Anchor with medium weight words

<P>
  Here is a paragraph with a <Span size="x-small">x-small</Span> word and
  some <Span weight="medium">medium weight text</Span> in it.
</P>
<H4>
  Heading 4 with <Span size="x-large">x-large</Span> word
</H4>
<Anchor href="/">
  Anchor with <Span weight="medium">medium weight</Span> words
</Anchor>

Span modifiers

Default span
Medium weight span
Basis size span
X-small span with medium weight
Code Editor<div>
  <Span>Default span</Span>
  <br />
  <Span weight="medium">Medium weight span</Span>
  <br />
  <Span size="basis">Basis size span</Span>
  <br />
  <Span weight="medium" size="x-small">
    X-small span with medium weight
  </Span>
</div>