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
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
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.
-
Documentation
- box
Box with stream
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
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
-
On this page
- Top of page
- Documentation
-
Stories
- Box with stream
- Simple box
- Box elements
- Condensed
- Spacious
- Dashed border
- Blue box
- Danger
- Blue header
- Row themes
- From data
- Box title
- Box title with a counter
- Box title with a button
- Box with an alert
- Rows as links
- Row with link
- Header with icon button
- Overflow inner content
- Custom styles
- Styling with CSS utilities
- Reusing styled component
- Top of page
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
-
- Box with stream
- Simple box
- Box elements
- Condensed
- Spacious
- Dashed border
- Blue box
- Danger
- Blue header
- Row themes
- From data
- Box title
- Box title with a counter
- Box title with a button
- Box with an alert
- Rows as links
- Row with link
- Header with icon button
- Overflow inner content
- Custom styles
- Styling with CSS utilities
- Reusing styled component
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav