Box

Static container for elevating content

Demo

Primary content Secondary content

Content outside a Box is considered neutral

See more examples

API

Tag

Name Type Content
m-box Custom tag Any

Attributes

Name Value Description
ord
  • secondary
Ordinal number word for describing the content's importance.

Guidelines

Nesting

Although possible, Boxes of the same ord should not be nested inside each other. Nesting a secondary Box inside a primary Box is ok:

Terms of service

Boxes of the same ord should not be nested inside each other. Nesting a secondary Box inside a primary Box is ok. You must agree to these guidelines to continue.

Because a Box header is more tricky than it seems (compensating for default padding), it doesn't get any special styles. However, it just takes a few classes to get a nice Box header:

Header
Content

Accessibility

There are no accessibility recommendations for Box.