Skip to content
Home

Span

Info
Demos
Properties

Import

import { Span } from '@dnb/eufemia/elements'

Description

Spans are inline-elements, used to define parts of text content.

Span does not define any default styling, if no props are set, it will just be a regular inline <span> element.

Typography CSS classes

Both Span and the Paragraph component have the same typography props that uses the typography helper classes.

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
Code Editor
<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>