Anatomy
Options
as
The as prop allows you to change the underlying HTML element that is rendered. This is useful for when you want to use a component that is not a div by default.
css
The css props allows you to pass in a style object that will be applied to the underlying HTML element.
Guidance
Protoyping
This component is used to create a box element with a set of default styles. It's best used in protoyping and playing with components. For production code, we recommend using "styled" or "css" functions intead.
Production
For production code, we recommend using "styled" or "css" functions intead.
Accessibility
This component is not accessible by default. You should always use the as prop to change the underlying HTML element to something more semantic.
API Reference
Box
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| as | WPDS provides an as prop for changing which tag a component outputs. | never | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: calc(${string} - 1px))`; md: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; lg: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xl: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notS... | ---- | False |