Box

A flexible layout utility used to group related content

Healthy
Show details
Healthy
Published: September 12, 2024
Updated: September 12, 2024

Overview

Box / size=large (padding-24), shadow=none, border=false, backgroundColor=secondary

Box / size=large (padding-24), shadow=none, border=false, backgroundColor=secondary

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.

 

When to Use a Box vs. a Card

  • Use a Box when grouping simple, related elements without complex styling. Examples include stacking elements vertically or horizontally.
  • Use a Card when displaying information with more visual emphasis, such as distinct borders, shadows, or grouped content that needs separation from other UI elements—like the template or campaign selection thumbnail view

Design

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.

Variants & properties

Size

Box / size=small (padding-8), shadow=none, border=false, backgroundColor=secondary

Box / size=small (padding-8), shadow=none, border=false, backgroundColor=secondary

Box / size=med (padding-16), shadow=none, border=false, backgroundColor=secondary

Box / size=med (padding-16), shadow=none, border=false, backgroundColor=secondary

Box / size=large (padding-24), shadow=none, border=false, backgroundColor=secondary

Box / size=large (padding-24), shadow=none, border=false, backgroundColor=secondary

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.

 

Styles

The box can have different styles, which primarily dictate the background color, but may also impact border color as well.

  • Primary: uses the primary background color (white)
  • Secondary: uses the secondary background color (grey 1)
  • Tertiary: uses the tertiary background color (grey 5)

The style will predetermine the border color to ensure there is enough contrast between the border and the background.

 

Additional props

Borders

  • hasBorder: Adds a border to delineate sections
    • Primary: use the border color subtle
    • Secondary: use the border color primary
    • Tertiary: use the border color strong
Box / size=large (padding-24), shadow=none, border=true, backgroundColor=primary
Box / size=large (padding-24), shadow=none, border=true, backgroundColor=secondary
Box / size=large (padding-24), shadow=none, border=true, backgroundColor=tertiary

 

 

Shadows

  • hasShadow: Adds a subtle or small shadow for slight emphasis.
    • none (default): no shadow applied; best for most uses
    • subtle: used to elevate the container from the surrounding UI. This is the same shadow applied to inputs and buttons, so it can help match styles if the container is placed near these elements
    • small: used to create emphasis among other flat UI elements; not recommended to use when inside of a card or container that has a shadow already applied
Box / size=med (padding-16), shadow=none, border=false, backgroundColor=secondary
Box / size=large (padding-24), shadow=subtle, border=false, backgroundColor=primary
Box / size=large (padding-24), shadow=small, border=false, backgroundColor=primary

For more tips and guidelines on how borders and shadows should be used with Aurora, please see Borders and Depth.

Guidelines

Do
  • Use boxes to group related, lightweight content with minimal styling
  • Use boxes to structure content in modals, sidebars, or areas where a full card is unnecessary
  • Use boxes to group related buttons or inputs
  • Choose the appropriate size variant based on content length
  • Apply background colors sparingly to ensure visual clarity
Don't
  • Don't use a box when you need a highly styled or emphasized grouping, use a card instead
  • Don't overuse shadows or borders; boxes are meant to be minimal
  • Don't Use boxes for highly interactive or media-heavy content, use a card instead

 

Examples

Next Best Action campaign creation

Next Best Action campaign creation

Boxes are used within the Next Best Action campaign creation modal to help parse different selection areas.

Updating alert settings

Updating alert settings

A box is used to indicate the alert changes that have been made within the alert configuration interface.

Smart ingest sync limit

Smart ingest sync limit

The primary control for adjusting the sync limit amount has been placed inside of a box to create emphasis.

Content

  • Boxes should hold clear, concise content
  • Elements within a box are related and make sense to be grouped together
  • While not required in all instances, include a heading within the box if the content within is not related to content outside of the box in close proximity to reduce confusion

Accessibility

  • Ensure that boxes are properly labeled and that content within them is logically grouped for screen readers
  • Use sufficient padding and spacing to enhance readability, particularly for users relying on assistive technology.
  • Test shadow and border variants to maintain high contrast and visibility for users with visual impairments.

Health

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

Healthy