Box

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

React

released

Vue

released

Elements

released

Android

released

iOS

released

Example

Usage

Design Guidelines

See Figma: Warp - Components / Box

Questions?

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

Accessibility

Use the ARIA role attribute to provide semantic meaning to a Box element. If no role property is supplied, it will default to role="region". To remove the default role attribute, supply an empty role (role=""). Consider using more suitable roles for your specific Box, as described on MDN WAI-ARIA Roles.

Frameworks

Import

You can import the component like so:

import { Box } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Box } from '@warp-ds/react/components/box';

Syntax

<Box info>
    <p>This is <strong>info</strong> variant of the box component</p>
</Box>

Props

Optional Props

name	type	default	notes
as	string	div	The DOM element to emit
bleed	boolean	false	Will make a box full-width on sm-size
bordered	boolean	false	Adds a lovely border
info	boolean	false	Will style the box with colors for indicating that it has informative content
neutral	boolean	false	Will style the box in a neutral fashion
role	string	region	Sets the ARIA role attribute to provide semantic meaning. To remove the default role attribute, supply an empty role (role="").