Layout: Box

The box should have borders and/or padding on all sides, or none at all. Otherwise it's not a box, but something more specific.

This is an example of the default box layout. It uses the class .l-box

It has an even border and padding on all sides.

Because its parent - main - uses Flexbox in the column direction, the box stretches full width.

To limit the width of a box to just its content, use align-self: flex-start;

For a box without padding, use the modifier class .l-box--no-padding

For a box without a border, use the modifier class .l-box--no-border

High contrast themes tend to eliminate background-color. If there is no border set on the box, we need to apply a transparent outline to maintain the box shape. The negative outline-offset moves the outline inside the perimeter so it behaves like a border and doesn't add to the overall size.

This box has neither border nor padding.