Stable

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, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab

Installation

bash

npm install @nib/layout

Usage

jsx

import {Section} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

<>
  <Section mode="warm" background="default" foreground="default">
    <Stack space={2}>
      <Heading size={2}>Singles health insurance</Heading>
      <Copy color="brand">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>
    </Stack>
  </Section>
  <Section mode="sunset" background="default" foreground="default">
    <Stack space={2}>
      <Heading size={2}>Couples health insurance</Heading>
      <Copy>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>
    </Stack>
  </Section>
</>

<>
  <Section mode="warm" background="default" foreground="default">
    <Stack space={2}>
      <Heading size={2}>Singles health insurance</Heading>
      <Copy color="brand">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>
    </Stack>
  </Section>
  <Section mode="sunset" background="default" foreground="default">
    <Stack space={2}>
      <Heading size={2}>Couples health insurance</Heading>
      <Copy>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>
    </Stack>
  </Section>
</>

Props

Prop	Type	Default	Description
`background`	string	`transparent`	Add a background color for the section. Valid options provided by underlying the Box component.
`containerWidth`	string or object		Sets the maximum width of the container. Must be one of `narrow`, `default` or `wide`. Can be made responsive by passing an object of breakpoints.

Considerations

The is a low-level component that provides you with a Box 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 Box component.

For example:

jsx

import {Box} from '@nib/layout';

<Box padding={{xs: 1, md: 2, xl: 3}}>
  <Container>{children}</Container>
</Box>;

Container

Edit this page