Skip to content

Heading

Eufemia comes with three levels of heading styles:

  • .dnb-h--xx-large (Heading xx-large)
  • .dnb-h--x-large (Heading x-large)
  • .dnb-h--large (Heading large)

Additional, you can use these style modifiers if needed:

  • .dnb-h--medium
  • .dnb-h--basis
  • .dnb-h--small
  • .dnb-h--x-small

Optional, you could use .dnb-lead (equivalent to .dnb-h--medium) to style a heading as well. But only if that would make sense in the particular context.

The sizes are aligned to the font-size definitions.

Think semantics first

You should think semantics first once you choose what level of heading you use. Always try to start with an <h1>. When the heading levels are properly defined, you can go ahead and define the sizes (styles).

If you have to use a paragraph (<p>) or a arbitrary heading, and it has to look like a specific heading, you can use these classes:

  • .dnb-h--xx-large
  • .dnb-h--x-large
  • .dnb-h--large
  • etc.

Read more about best practices for typography.

Automated heading levels

There is also Heading, a component to create automated semantic headings within a boundary of some rules.

import { Heading } from '@dnb/eufemia/components'

Heading styles in React

import { H1, H2, ... } from '@dnb/eufemia'

Heading typography using React JSX

Heading style xx-large

Heading style x-large (one down)

Heading style small

Heading style large

<H1 bottom="large">Heading style xx-large</H1>
<H1 size="x-large">Heading style x-large (one down)</H1>
<H1 size="small">Heading style small</H1>
<H2>Heading style large</H2>

By using the <small> element, we decrease the size one level (default size is xx-large):

Heading style x-large

Heading style x-large

<H1 size="x-large">Heading style x-large</H1>
<H1>
<small>Heading style x-large</small>
</H1>

Heading styles in vanilla HTML

Heading style xx-large

Heading style x-large

Heading style large

Heading style small

Heading style basis

Additional Heading modifiers

dnb-h--x-large Normal dnb-h--xx-large

Normal dnb-h--large dnb-h--medium

Normal dnb-h--medium dnb-h--basis

Example of margin collapsing

Only the largest margin takes effect.

Spacing with bottom margin: small

Spacing with top margin: large

<H1 size="small" top bottom="small">
Spacing with bottom margin: small
</H1>
<P top="large" bottom="small">
Spacing with top margin: large
</P>