<SectionHeader> Component

Very simple headline & subheading for a section of a page.

Share
Code Editor
<SectionHeader
headline='Headline'
description='Maecenas sed <strong>diam eget</strong> risus varius blandit sit amet non magna.'
/>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...

Props

NameDescription
headline
string
The primary headline.
description
string
A smaller line of text below the headline.
useH1
boolean
Whether to make the headline an h1 or h2.

Examples

With useH1 prop:

Share
Code Editor
<SectionHeader
headline='Headline'
description='Maecenas sed diam eget risus varius blandit sit amet non magna.'
useH1={true}
/>

With description in a <p> tag:

Share
Code Editor
<SectionHeader
headline='Headline'
description='<p>Maecenas sed <strong>diam eget</strong> risus varius blandit sit amet non magna.</p>'
/>

With description with multiple <p>:

Share
Code Editor
<SectionHeader
headline='Nomad Open Source and Enterprise Features'
description='<p>Nomad Open Source addresses the <strong>technical complexity</strong> of workload orchestration in the cloud, on-prem, or on hybrid infrastructure.</p><p>Nomad Enterprise addresses the organizational complexity of multi-team and multi-cluster deployments with collaboration and governance features.</p>'
/>