Box

Box helps you group related content so it feels organized and easy to scan. It gives each section a clear background, spacing, and readable text so pages feel consistent across the site.

Use Box when you need to:

• Group content into a clear section
• Add helpful visual meaning with color (like default, primary, success, or warning)
• Build new components with color combinations that are already accessibility-friendly

Properties

The color and variant settings work together to control the background, text, and border styles. Together, they make it easy to pick a look that is both clear and accessible.

As

Box is rendered as a div by default but can be changed to any semantic element with the as prop. For example, use section for a standalone content area or aside for tangential information.

Color

The following demonstration shows the different color types for the selected variant. Click on any box to set the color for all boxes on this page.

Variant

Each color has a set of variants that help provide emphasis to the grouped content. Click on any box to set the variant for all boxes on this page.

Output

Below is the output of the Box component with the selected color and variant. Click on any box in the galleries above to change the color and variant of this box.

Usage notes

• Choose the variant based on emphasis needed: start with subtle or moderate for most layouts.
• Reserve emphasis and strong for callouts or high-attention regions.
• Keep content hierarchy clear by combining Box with semantic elements such as section, article, and aside.

Accessibility

Box is designed so content inside it stays readable and high contrast. Using the color and variant options helps you choose combinations that support accessibility.

You can also improve page structure by pairing Box with semantic elements like section, article, and aside, which helps assistive technology understand your content.

Each individual Box is built with accessible color choices, but real pages can combine many boxes. When you nest or layer boxes, make sure the full layout still has strong contrast and clear structure.

Storybooks