Skip to content
Mesh icon
    DesignDevelopAnalyticsFeedback
    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>
</>

    Props

    PropTypeDefaultDescription
    backgroundstringtransparentAdd a background color for the section. Valid options provided by underlying the Box component.
    containerWidthstring or objectSets 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>;
    Edit this page