Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Box

A box is a simple container with rounded corners, a white background, and a light gray border. It can be used to display a single item or a list of items, with an optional header and footer.

Box with stream

Interactive
Header
Ruth Saddlemore
John Bishop
Laura Manach
Julian Newton
Melissa Noakes
Quincy Pritchard
Melinda Crocket
Derek Samuel
Footer

Simple box

Content

Box elements

Header
Body
Row
Row
Footer

Condensed

Header
Row
Row
Footer

Spacious

Header
Row
Row
Footer

Dashed border

Header
Row
Row
Footer

Blue box

Header
Row
Row
Footer

Danger

Row
Row

Blue header

Header
Row
Row
Footer

Row themes

Row
Row
Row
Row
Row

From data

A
B
C

Box title

Title

Row

Box title with a counter

Title 12

Row

Box title with a button

Title

Rest

Box with an alert

Header
Done!
Body
Footer

Rows as links

href link navigate link patch link no underline, hover gray

Row with link

Home

Header with icon button

A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right

Content

Overflow inner content

Header

General info

Body
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Footer

Custom styles

Header
Row
Row
Row

Styling with CSS utilities

Header
Row
Row
Row

Reusing styled component

This example demonstrates the reuse of a component that contains custom styles.
Header
Row
Row
Row