SectionHeader

Child of the Section component. Each Section should have one SectionHeader component.

Section label

Section title

Optional section subtitle

React
CSS

<SectionHeader
  label="Section label"
  title="Section title"
  subtitle="Optional section subtitle"
  actions={
    <Button>Action</Button>
  }
/>

<div class="section_header">
  <p class="section_label">Section label</p>
  <h1 class="section_title">Section title</h1>
  <p class="section_subtitle">Optional section subtitle</p>
  <div class="section_actions">
    <button class="button">Action</button>
  </div>
</div>

Props

TitleLevel

Controls the heading level and visual hierarchy of the title.

1 => variant h2, component h1
2 => variant h3, component h2 (default)
3 => variant h4, component h3

Level 1

Level 2

Level 3

<SectionHeader title="Level 1" titleLevel={1} />
<SectionHeader title="Level 2" titleLevel={2} />
<SectionHeader title="Level 3" titleLevel={3} />

ActionsPosition

Controls where actions are placed relative to the title.

right — inline with the title on desktop, stacks below on mobile
bottom (default) — below the subtitle

Actions on the right

Actions appear at the right of the title on desktop, below the title on mobile

Actions on the bottom

Actions appear below the subtitle

<SectionHeader
  title="Actions on the right"
  actions={<Button>Action</Button>}
  actionsPosition="right"
/>
<SectionHeader
  title="Actions on the bottom"
  actions={<Button>Action</Button>}
  actionsPosition="bottom"
/>