Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Box
Box is a component to define layout in a grid manner.
Coral uses 24 grid system just like Ant Design, and unified Grid (doesn’t differentiate between Col and Row) flex like Material-UI.
Example
Basic Usage
In the example below, don’t worry about Colorize component, what it does is simply highlighting the Boxes with some colors. It doesn’t affect any layout.
24
12
12
8
8
8
6
6
6
6
View code
Gap
Gap accepts either number or a pair of numbers ([number, number]). If you pass a number, the value will be used for horizontal gap only.
12
6
6
12
6
6
View code
If you pass pair of numbers, the first and second values are used for horizontal and vertical gaps consecutively.
12
6
6
8
8
8
View code
Flex properties
Align Items
flex-start
8
8
8
center
8
8
8
View code
Direction
row
12
8
4
column
12
8
4
View code
References
- Ant Design: https://ant.design/components/grid/
- Material-UI: https://material-ui.com/components/grid/
- A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- CSS Flexible Box Layout Module: https://www.w3.org/TR/css-flexbox-1/
API
Box
| Prop name | Type | Default | Description |
|---|---|---|---|
| alignContent | AlignContent | stretch | Equivalent to CSS align-content property. |
| alignItems | AlignItems | stretch | Equivalent to CSS align-items property. |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| direction | FlexDirection | row | Equivalent to CSS flex-direction property. |
| gap | Gap | 0 | Determines spacing (some call it gutter) between child Boxes. If a number is passed, it's used as horizontal only. If a pair of number is passed, it's used as horizontal and vertical respectively. |
| justify | JustifyContent | flex-start | Equivalent to CSS justify-content property. |
| span | number | 24 | Width of the box. One row can fit at most total of 24 span. More than that, it will wrap to next row, just like a flex. |
| wrap | FlexWrap | wrap | Equivalent to CSS flex-wrap property. |