Paragraph

Paragraph class modifiers

Eufemia comes with several styles you can use on paragraphs and other HTML text elements:

Weights

.dnb-p (Body text)
.dnb-p--medium

Sizes

.dnb-p--small
.dnb-p--x-small

Variants

.dnb-p--lead

Paragraphs in React

Paragraphs using React JSX.

import { P, Lead } from '@dnb/eufemia'

Default paragraph

Medium weight paragraph

Small paragraph

Small paragraph with medium weight

<div>
  <P>Default paragraph</P>
  <P modifier="medium">Medium weight paragraph</P>
  <P size="small">Small paragraph</P>
  <P modifier="small medium">Small paragraph with medium weight</P>
  {/* (Bold is currently not supported by DNB UX) */}
  {/* <P modifier="bold">Bold weight paragraph</P> */}
  {/* <P modifier="small bold">Small paragraph with bold weight</P> */}
</div>

Paragraphs `basis` sized

Here is a paragraph textAnchor / Text LinkBold paragraph (medium weight)Strong paragraph (medium weight)Numbers 0123456789Code paragraphCite paragraphText ¹ Text ¹ Text ¹ Text ¹ Text ₁ Text ₁

Paragraph `small` sized

Here is a small paragraph textAnchor / Text LinkBold paragraph (medium weight)Strong paragraph (medium weight)Numbers 0123456789Code paragraphCite paragraphText ¹ Text ¹ Text ¹ Text ¹ Text ₁ Text ₁

Here is a x-small paragraph text
with a new line.

Additional Paragraph formatting (not defined yet)

Italic paragraphUnderline paragraphUX~~Deleted paragraph~~Marked paragraphInserted paragraphText ^SuperscriptText _Subscript

#Paragraph

#Paragraph class modifiers

#Paragraphs in React

#Paragraphs basis sized

#Paragraph small sized