Box is a component for rendering elements.
UsagePermalink to: Usage
Box is a is a low-level utility component for rendering elements. It supports padding (responsive and non-responsive) and can be rendered as any element.
ExamplesPermalink to: Examples
PaddingPermalink to: Padding
Box accepts all padding properties(external link).
You can apply equal padding to all sides (padding).
Open
import { Box } from "@peakon/bedrock/react/layout";
function Snippet() {
return (
<div
style={{
display: "flex",
alignItems: "flex-start",
}}
>
<div
style={{
outline: `1px dashed hotpink`,
}}
>
<Box padding={8}>Box</Box>
</div>
</div>
);
}You can also use paddingBlock and/or paddingInline. These will override their corresponding sides on padding if both are provided.
Open
import { Box } from "@peakon/bedrock/react/layout";
function Snippet() {
return (
<div
style={{
display: "flex",
alignItems: "flex-start",
}}
>
<div
style={{
outline: `1px dashed hotpink`,
}}
>
<Box paddingBlock={12} paddingInline={64}>
Box
</Box>
</div>
</div>
);
}Or, you can use the most granular padding properties (eg. paddingBlockStart). As the highest level of specificity, these will override any related properties, eg. paddingBlockStart overrides the logical start padding in paddingBlock or padding.
Open
import { Box } from "@peakon/bedrock/react/layout";
function Snippet() {
return (
<div
style={{
display: "flex",
alignItems: "flex-start",
}}
>
<div
style={{
outline: `1px dashed hotpink`,
}}
>
<Box
paddingBlockStart={24}
paddingBlockEnd={48}
paddingInlineStart={64}
paddingInlineEnd={8}
>
Box
</Box>
</div>
</div>
);
}Responsive paddingPermalink to: Responsive padding
All the padding props on Box support responsiveness.
To use responsive padding, instead of providing one padding value, provide an object with Bedrock breakpoints as the keys and pass the associated padding as their value. See Bedrock breakpoints for an overview of what each breakpoint maps to.
The only required value is base, which is the default value and applies at 0px. You can choose as many or few breakpoints as required to change padding as the viewport grows in width.
Open
import { Box } from "@peakon/bedrock/react/layout";
function Snippet() {
return (
<div
style={{
display: "flex",
alignItems: "flex-start",
}}
>
<div
style={{
outline: `1px dashed hotpink`,
}}
>
<Box
padding={{
base: 0,
xs: 8,
sm: 16,
md: 32,
lg: 48,
xl: 64,
}}
>
Content
</Box>
</div>
</div>
);
}As another elementPermalink to: As another element
Box renders as a div but default, but can be rendered as another element with the as prop.
Open
import { Box } from "@peakon/bedrock/react/layout";
function Snippet() {
return <Box as="span">{`As a <span>`}</Box>;
}Props TablePermalink to: Props Table
BoxPermalink to: Box
Props extend from HTML Div Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
children | ReactNode | The contents of the Box. | — | Yes |
padding | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Shorthand to apply equal padding to all sides of the Box. | — | No |
paddingBlock | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Shorthand to apply equal padding to the logical block start and end of the Box. | — | No |
paddingInline | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Shorthand to apply equal padding to the logical inline start and end of the Box. | — | No |
paddingBlockStart | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Applies padding to the logical block start of the Box. | — | No |
paddingBlockEnd | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Applies padding to the logical block end of the Box. | — | No |
paddingInlineStart | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Applies padding to the logical inline start of the Box. | — | No |
paddingInlineEnd | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Applies padding to the logical inline end of the Box. | — | No |
as | HTMLElement | What element to render the Box as. | — | No |