#Paragraph

#Import

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

#Description

Paragraphs are block-level elements, used to structure and format text contents.

Paragraph has some default typography styling even without any properties being set.

Read more about Fonts in the Designer Guides.

#Relevant links

• Source code
• Docs code

#Typography CSS classes

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

#Demos

#Paragraphs modifiers

These are the standard available modifiers for paragraph typography:

• Weight
• Size
• Alignment
• Font family
• Line height

As well as some other modifiers.

#Weight

#Size

Also automatically sets the matching line-height (line property).

#Alignment

#Font family

#Line height

Line-height will be set automatically based on the size properties, but can also be set separately if needed.

#Other modifiers

Although bold, italic and underline are not a standard part of the Eufemia design system for typography (in particular, "medium" should be used instead of "bold"), we still include them as an option for convenience. And there are also cases where an accessibility case can be made for their use.

#Prose max width

The proseMaxWidth prop allows you to limit the width of paragraph text based on character count, creating optimal reading line lengths:

#Using Typography.Provider

Use Typography.Provider to apply proseMaxWidth to multiple paragraphs at once:

ReferenceError: Typography is not defined

#Children tag styling

Paragraph also adds some default styling to child typography HTML elements. Like <b> or <strong>.

#Paragraphs basis sized

#Paragraph small sized

#Additional Paragraph formatting (not defined yet)