Box - Aragon Developers Documentation

Search…

Box

Box is a component that renders as a surface as defined by aragonDS, and can optionally have a heading. It is commonly used in either slot of the Split component.
Usage
import { Box, Main, Split } from '@aragon/ui'
​
function App() {
  return (
    <Main>
      <Split
        primary={<Box>Primary content</Box>}
        secondary={<Box heading="Secondary">Secondary content</Box>}
      />
    </Main>
  )
}
Props
heading
TYPE
DEFAULT VALUE
React node
None
Displays a heading on top of the Box. Generally used when the Box is passed to the secondary prop of Split.
children
TYPE
DEFAULT VALUE
React node
None
The content of Box.
padding
TYPE
DEFAULT VALUE
Number
None
The padding applied to the content of the box (i.e. the part below the heading, when set).
Note: when used in the primary slot of the Split component, the content padding will adapt to the layout (one or two columns). Set it to any value to override this behavior.

Bar

Card

Last modified 2mo ago

Copy link

On this page

Usage

Props

Usage

Props

`heading`

`children`

`padding`