Span#

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 properties are set, it will just be a regular inline <span> element.

Relevant links#

Typography CSS classes#

Both Span and the Paragraph component have the same typography properties that use the typography helper classes.

Demos#

For more detailed examples of every property, 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

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

Suggest an edit