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