Containers

Containers are widths intended to constrain elements via $maxWidth inline with our desktop layout grid columns and account for desktop gutter sizes. See the Container component for an example of how this can be employed.

import { container } from '@sky-uk/ui-core';

container(6);

// returns '636px'

You can return the containers without a px suffix by passing false as a second argument. This is useful if you need to use the raw number for calculations.

container('md', false);

// returns 640

Available Containers

• 0 = 0px,
• 1 = 126px,
• 2 = 228px,
• 3 = 330px,
• 4 = 432px,
• 5 = 534px,
• 6 = 636px,
• 7 = 738px,
• 8 = 840px,
• 9 = 942px,
• 10 = 1044px,
• 11 = 1146px,
• 12 = 1248px