Skip to content

Box - Frameworks

Box is a layout component used for separating content areas on a page.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Elements

Syntax

js
<w-box info>
    <p>This is <strong>info</strong> variant of the box component</p>
</w-box>

Props

Optional Props

NameTypeDefaultDescription
bleedbooleanfalseWill make a box full-width on sm-size
borderedbooleanfalseAdds a lovely border
infobooleanfalseWill style the box with colors for indicating that it has informative content
neutralbooleanfalseWill style the box in a neutral fashion
rolestringregionSets the ARIA role attribute to provide semantic meaning. To remove the default role attribute, supply an empty role (role="").

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system