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


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.

backgroundColour and textColour props

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

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.