Skip to content
Home

Heading

Info
Demos
Properties

Demos

The most basic use of headings

Just using the H1, H2, etc. components will give you the basic headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Regular text

Code Editor
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>Regular text</P>

Heading typography using React JSX

The visual size of a heading can be customized using the size property with values: xx-large | x-large | large | medium | basis | small | x-small

Heading 1 (default size 'xx-large')

Heading 1 style 'x-large'

Heading 1 style small

Code Editor
<H1>Heading 1 (default size 'xx-large')</H1>
<H1 size="x-large">Heading 1 style 'x-large'</H1>
<H1 size="small">Heading 1 style small</H1>

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

Heading style x-large (using 'size')

Heading style x-large (using <small>)

Code Editor
<H1 size="x-large">Heading style x-large (using 'size')</H1>
<H1>
  <small>Heading style x-large (using &lt;small&gt;)</small>
</H1>

Prose max width

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

This is a regular heading without any width constraints. It will extend to the full width of its container.

This heading uses proseMaxWidth=40 to limit its width to approximately 40 characters.

This heading uses proseMaxWidth=20 for an even narrower reading width.

This heading uses proseMaxWidth with its default value.

Code Editor
<H2>
  This is a regular heading without any width constraints. It will extend
  to the full width of its container.
</H2>
<H2 proseMaxWidth={40}>
  This heading uses proseMaxWidth={40} to limit its width to
  approximately 40 characters.
</H2>
<H2 proseMaxWidth={20}>
  This heading uses proseMaxWidth={20} for an even narrower reading
  width.
</H2>
<H2 proseMaxWidth>
  This heading uses proseMaxWidth with its default value.
</H2>

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--xx-large small

.dnb-h--x-large small

.dnb-h--large small

.dnb-h--medium small

.dnb-lead small

Example of margin collapsing

Only the largest margin takes effect.

Spacing with bottom margin: small

Spacing with top margin: large

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