Section

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

Storybook documentation

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.

Left

Align all content and text to the left

Center

Align all content and text to the center

Right

Align all content and text to the right

React

<Section>
  <SectionHeader
    title="Left"
    subtitle="Align all content and text to the left"
  />
</Section>
<Section align="center">
  <SectionHeader
    title="Center"
    subtitle="Align all content and text to the center"
  />
</Section>
<Section align="right">
  <SectionHeader
    title="Right"
    subtitle="Align all content and text to the right"
  />
</Section>

CSS

<div class="section">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Section left</p>
      <p class="section_subtitle">Align all content and text to the left</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-right">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Section right</p>
      <p class="section_subtitle">Align all content and text to the right</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>

Header

Prop to set the component as the first section on a page. This changes the text font sizes and spacing between elements.

Header

Prop for the first section of a page.

React

<Section header>
  <SectionHeader
    title="Header"
    subtitle="Prop for the first section of a page."
  />
</Section>

CSS

<div class="section section-header">
  <div class="section_container">
    <div class="section_header">
      <p class="section_title">Header</p>
      <p class="section_subtitle">Prop for the first section of a page.</p>
    </div>
  </div>
</div>