---
name: Section
menu: Patterns
parent: Modules
route: /patterns/section
---

# Section

Section lays out full width sections of content, with or without curved edges or backgrounds.

## Basic

The following will create a section with `sun` sized top and bottom margins (which will collapse into one another where there are two successive sections) and `sun` sized left and right padding. Any content can go inside the section.

```specimen-react
<Section>
  <p>Child content.</p>
</Section>
```

## `backgroundColour` and `textColour` props

You can add background colors using the `backgroundColour` prop. Where one is supplied, the `textColour` defaults to `palette.greyScale.white`. However, you can override this where a light background colour necessitates a lighter text colour. For example:

```specimen-react
<Section
  backgroundColor={colors.greyScale.lightGrey}
  textColor={colors.brand.blue}
>
  <p>Child content.</p>
</Section>
```

The top and bottom of the section is automatically padded where a `backgroundColour` is supplied, to take the content of the colour edges.

## `pullLeft` and `pullRight` props

To remove the default padding from either side, use the `pullLeft` or `pullRight` prop, or both.
