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.

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

Actions inline

Actions appear inline with the title on desktop, below the title on mobile

Actions at the end of the block axis

Actions appear below the subtitle

<SectionHeader
  title="Actions inline"
  actions={<Button>Action</Button>}
  actionsPosition="inline"
/>
<SectionHeader
  title="Actions at the end of the block axis"
  actions={<Button>Action</Button>}
  actionsPosition="end"
/>