Box

The box layout helper is a simple container for grouping content within a defined region. It uses the class l-box.

Box deliberately treats padding and borders equally on all sides.

If your container needs asymmetrical styling, then it's a container with a more specific purpose and not a box.

CSS custom properties

--box-bg-clr

Override the default background colour, which is set to transparent.

--box-border-clr

Override the default border colour, which is set to currentcolor.

--box-border-style

Override the default solid border style.

--box-border-width

Override the default border width, which is set to 2px.

--box-radius

Override the default border radius, which is set to 0.

--box-padding

Override the default padding, which is set to 1.25rem.

Considerations

The recommended minimum width for a border is 2px, to help make it noticeable to people with low vision.

Forced colors mode (previously Windows High Contrast Mode) tends to eliminate background colours. If border: none; is set on the box, or a zero value is used for --box-border-width, this can cause accessibility issues for people using forced colors mode. They won't be able to see that the content of the box is distinct from other areas, which can make it difficult to distinguish things like modal windows, flyout or dropdown navigation, and auto-suggestions for search inputs.

There are two options for managing this:

• keep the border and make it transparent or give it the same colour as any background-color used for the box, or
• use border: none; and add a transparent outline with a negative outline-offset matching the width of the outline to move it inside the box perimeter so that it doesn't impact the overall size of the box

The latter approach is demonstrated in the box without a border example.