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 props being set.
Read more about Fonts in the Designer Guides.
Typography CSS classes
Both Paragraph and the Span component have the same typography props that uses the typography helper classes.
Demos
Paragraphs modifiers
These are the standard available modifiers for paragraph typography:
As well as some other modifiers.
Weight
Default paragraph
Regular weight paragraph (same as default)
Medium weight paragraph
Size
Also automatically sets the matching line-height (line prop).
x-small paragraph
small paragraph
medium paragraph
basis paragraph (same as default)
large paragraph
x-large paragraph
xx-large paragraph
Alignment
Right aligned paragraph
Center aligned paragraph
Left aligned paragraph
Font family
Basis family paragraph (same as default)
Heading family paragraph (only different on some themes)
Monospace family paragraph
Line height
Line-height will be set automatically based on the size props, but can also be set separately if needed.
x-small line-height paragraph
small line-height paragraph
medium line-height paragraph
basis line-height paragraph (same as default)
large line-height paragraph
x-large line-height paragraph
xx-large line-height paragraph
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.
Bold weight paragraph
Underline paragraph
Italic paragraph
Children tag styling
Paragraph also adds some default styling to child typography HTML elements. Like <b> or <strong>.
Paragraphs basis sized
Here is a paragraph textAnchor / Text LinkBold paragraph (medium weight)Strong paragraph (medium weight)Numbers 0123456789Code paragraphCite paragraphText 1 Text 1 Text 1 Text 1 Text 1 Text 1
Paragraph small sized
Here is a small paragraph textAnchor / Text LinkBold paragraph (medium weight)Strong paragraph (medium weight)Numbers 0123456789Code paragraphCite paragraphText 1 Text 1 Text 1 Text 1 Text 1 Text 1
Here is a x-small paragraph text
with a new line.
Additional Paragraph formatting (not defined yet)
Italic paragraphUnderline paragraphUXDeleted paragraphMarked paragraphInserted paragraphText SuperscriptText Subscript