4.2.1

Section

A section of a page, with standardised, responsive padding across screen sizes and a nested Container component (see related components below). A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind.

GitHub·Storybook

Installation

bash

npm install @nib-components/section

Usage

jsx

import Section from '@nib-components/section';

Interactive demo

Singles health insurance

You want to take care of your health and wellbeing. You’re after a health cover that fits the budget, but also gives you value for money.

Couples health insurance

You and your partner are focused on your health and wellbeing. You may be thinking of starting a family, so you want to make sure you have the right level of cover.

jsx

<>
  <Section background="sneezy">
    <Heading size={2}>Singles health insurance</Heading>
    <Copy>You want to take care of your health and wellbeing. You’re after a health cover that fits the budget, but also gives you value for money.</Copy>
  </Section>
  <Section background="william">
    <Heading color="white" size={2}>
      Couples health insurance
    </Heading>
    <Copy color="white">You and your partner are focused on your health and wellbeing. You may be thinking of starting a family, so you want to make sure you have the right level of cover.</Copy>
  </Section>
</>

<>
  <Section background="sneezy">
    <Heading size={2}>Singles health insurance</Heading>
    <Copy>You want to take care of your health and wellbeing. You’re after a health cover that fits the budget, but also gives you value for money.</Copy>
  </Section>
  <Section background="william">
    <Heading color="white" size={2}>
      Couples health insurance
    </Heading>
    <Copy color="white">You and your partner are focused on your health and wellbeing. You may be thinking of starting a family, so you want to make sure you have the right level of cover.</Copy>
  </Section>
</>

Props

Prop	Type	Default	Description
`background`	string	`transparent`	Add a background color for the section. One of '`white`', '`sneezy`', '`sleepy`', '`happy`', '`grumpy`', '`dopey`', '`doc`', '`bashful`' or '`william`'.

Considerations

The is a low-level component that provides you with a div with standard padding and a nested Container. It does not provide theming options or defined child components.

If non-standard padding sizes (or none at all) are required, then you could use the Container component instead or manually recreate the component yourself using the approved spacing package styled-components-spacing.

For example:

jsx

import {Padding} from 'styled-components-spacing';
<Padding all={{xs: 1, md: 2, xl: 3}}>
  <Container>{children}</Container>
</Padding>;

Container

Edit this page