Container

View on GitHub
import { Container } from '@sky-uk/ui-core';

The Container component can be used to constrain the size of content. it can be passed a size prop with one of the following values:

  • 12-col - 12 Columns (default)
  • 10-col - 10 Columns
  • 8-col - 8 Columns
  • 6-col - 6 Columns
  • 4-col - 4 Columns
<Container $paddingX={{ xs: 4, md: 5 }} $size="8-col">
  Content Goes Here
</Container>

The Container should only be used as an outermost wrapper to constrain content, it should not be used to build out complex grid layouts. If you need to build multicolumn layouts use Grid.

System Modifiers

The Container component also accepts props applied using the following system modifiers: