Is documented
The component is fully documented
The box component is a primitive utility that provides a flexible layout container used to group related content or components. While similar to a card, boxes are generally more minimal and are used for simpler structural needs.
Unlike Cards, which are typically reserved for individual list items (<li>), the box can be used more broadly throughout the interface to organize content. It offers a consistent padding, border, and shadow, making it suitable for sections that require emphasis without the constraints of being tied to a list structure.
This component is ideal for modular layouts, creating clear divisions between sections, or for wrapping other components for visual hierarchy and spacing.
The Box component includes the following properties:
• Size: Defines the padding inside the box. Options: large (padding-24), med (padding-16), small (padding-8).
• Shadow: Determines the shadow applied to the box. Options: none, small, subtle.
• Border: Toggles the presence of a border. Options: true, false.
• BackgroundColor: Defines the background color. Options: primary, secondary, tertiary.
• Slot: Placeholder for nested elements.
The Box component offers three size variants to accommodate different layouts and use cases.
1. Small: Useful for compact groupings of elements like form fields.
2. Medium: Balances space and compactness, ideal for grouping related buttons or small content sections.
3. Large: Provides ample space for elements like images and longer text.
The size will predetermine style settings such as border radius and padding.
The box can have different styles, which primarily dictate the background color, but may also impact border color as well.
The style will predetermine the border color to ensure there is enough contrast between the border and the background.
For more tips and guidelines on how borders and shadows should be used with Aurora, please see Borders and Depth.
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated