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

Select brand:

FinnTori

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

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

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="").
clickable	boolean	false	Applies styling to indicate click-ability, does NOT add click-ability to the box itself (see wClickable for that). @deprecated For rendering a clickable box, use Card component.