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.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>
)
}
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.TYPE | DEFAULT VALUE |
|---|---|
React node | None |
The content of
Box.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.Last modified 6mo ago