Skip to content
Home

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

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

Read more about Fonts in the Designer Guides.