Box

The Box is a design component that adds a border or background to a text, image, icon, or other element. Box does not provide any interaction states, its purpose is only to enhance elements on the page visually.

Component Status

Figma

Not available

Status

Stable

HTML

Up to date

React

Up to date

Twig

Not scheduled

Design usage

  • The Box is a simple utility component that enhances the visibility of an element on the page by adding a border, background, or both.
  • It should be used only on non-interactive elements

Box versus Card

The Box is simple and provides no interactivity; its only purpose is to help visually distinguish elements on the page.
Cards are complex, they consist of several subcomponents that can be used to create more structured content and they support interactive states, so they should be used to build interactive elements

 

© 2025 Spirit. Page last updated on Jan 29, 2025, 09:45