Box

When to use

Use Box to give content token-based padding, a surface, a border or rounded corners: a card, a panel, a well, a landmark. Use it when a layout needs a container and you do not want to write the values by hand.

When not to use

• To arrange items: Use Stack for vertical flow, Inline for horizontal flow and Grid for columns. Box is a single box only.
• For free styling: Box takes no className or style. Stack, Inline and Grid take className for layout; in Box every value is a token.
• To limit the page width: Use Container to centre content and give it a maximum width.

Anatomy

Box has two parts:

1. Container: a single <div> (or the element passed with render). Padding, surface colour, border and corner radius are written to it as classes.
2. Content: children. Box does not take part in the layout of its content; children sit in normal block flow.

Behaviour

• Box is static: it does not change on hover, click or focus, and it is not in the tab order.
• A prop that is not set produces no class. With no props at all, no class attribute is written.
• paddingInline and paddingBlock override the padding value on the same sides; they can be combined with padding.
• background, border and radius default to none; Box does not draw a visible surface by itself.

Guidelines

Choose padding to fit the content

In a Box with a border, zero padding makes the text touch the border.

Card title

DoPadding `lg`: the text is clear of the border.

Card title

Don'tPadding `none`: the text touches the border.

Choose the surface by its meaning

raised is a card that stands above the page, sunken is an area set into it. Do not mix them up.

Card title

DoThe card is `raised` with a `subtle` border.

Card title

Don'tThe card is `sunken`: it looks set in and does not stand out.

Content

• Box carries no text of its own; the content comes from its children.
• When you pass render={<section aria-label="..." />} for a landmark, write a short name that does not appear elsewhere on the page.
• Keep demo and example text neutral: “Card title”, “Card description goes here.”

Related components

• Stack: To stack the items inside a Box vertically.
• Inline: To lay the items inside a Box out horizontally.
• Grid: To place Boxes in columns.