Section

Defines a section on a page. A section will always have one SectionHeader and at least one SectionContent child component.

Storybook documentation (opens in new tab)

Section label

Section title

Optional section subtitle

Here you can add whatever you want, and add as many section content has you want.

React

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

CSS

<div class="section">
  <div class="section_container">
    <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>
    <div class="section_content">
      <!-- insert content -->
    </div>
  </div>
</div>

Props

Align

Change the elements and texts alignement inside the component. You can override that setup for individual SectionContent components.

Start

Align all content and text to the start of the inline axis

Center

Align all content and text to the center

End

Align all content and text to the end of the inline axis

React

<Section>
  <SectionHeader
    title="Start"
    subtitle="Align all content and text to the start of the inline axis"
  />
</Section>
<Section align="center">
  <SectionHeader
    title="Center"
    subtitle="Align all content and text to the center"
  />
</Section>
<Section align="end">
  <SectionHeader
    title="End"
    subtitle="Align all content and text to the end of the inline axis"
  />
</Section>

CSS

<div class="section">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Section start</p>
      <p class="section_subtitle">Align all content and text to the start of the inline axis</p>
    </div>
  </div>
</div>
<div class="section section-center">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Section center</p>
      <p class="section_subtitle">Align all content and text to the center</p>
    </div>
  </div>
</div>
<div class="section section-end">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Section end</p>
      <p class="section_subtitle">Align all content and text to the end of the inline axis</p>
    </div>
  </div>
</div>

Color

Change the background and text color.

Default

Change the background colour to default

Paper

Change the background colour to paper

Primary

Change the background colour to primary

Primary Light

Change the background colour to primary light

React

<Section>
  <SectionHeader
    title="Default"
    subtitle="Change the background colour to default"
  />
</Section>
<Section color="paper">
  <SectionHeader
    title="Paper"
    subtitle="Change the background colour to paper"
  />
</Section>
<Section color="primary">
  <SectionHeader
    title="Primary"
    subtitle="Change the background colour to primary"
  />
</Section>
<Section color="primaryLight">
  <SectionHeader
    title="Primary Light"
    subtitle="Change the background colour to primary light"
  />
</Section>

CSS

<div class="section section-default">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Background default</p>
      <p class="section_subtitle">Change the background colour to default</p>
    </div>
  </div>
</div>
<div class="section section-paper">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Background paper</p>
      <p class="section_subtitle">Change the background colour to paper</p>
    </div>
  </div>
</div>
<div class="section section-primary">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Background primary</p>
      <p class="section_subtitle">Change the background colour to primary</p>
    </div>
  </div>
</div>
<div class="section section-primaryLight">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Background primary-light</p>
      <p class="section_subtitle">Change the background colour to primary light</p>
    </div>
  </div>
</div>

Landing

Prop to set the component as the landing section on the homepage. This changes the text font sizes and spacing between elements.

Landing

Prop for the website homepage landing section.

React

<Section landing>
  <SectionHeader
    title="Landing"
    subtitle="Prop for the website homepage landing section."
  />
</Section>

CSS

<div class="section section-landing">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Landing</p>
      <p class="section_subtitle">Prop for the website homepage landing section.</p>
    </div>
  </div>
</div>