SectionHeader

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

Figma componentStorybook documentation

Section label

Section title

Optional section subtitle

React

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

CSS

<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

TitleComponent

Override the HTML tag of the section title.

You can use h1 to h6 and p

<SectionHeader
  title="You can use h1 to h6 and p"
  titleComponent="p"
/>