Box

When to use it

The Box component is used to style notifications, help texts in forms, validation warnings, etc.

For more nuances, feel free to use .c-box--positive and .c-box--negative.

A smaller variant (.c-box--small) can be used when space is limited.

TIP

To override the default border radius, set --surface-radius to a different value.

What it looks like

Code examples

Positive

<div class="c-box c-box--positive">
    Success message 
</div>
<div class="c-box c-box--positive c-box--small">
    Small success message
</div>

Info

<div class="c-box c-box--info">
    Info message
</div>
<div class="c-box c-box--info c-box--small">
    Small info message
</div>

Warning

<div class="c-box c-box--warning">
    Warning message
</div>
<div class="c-box c-box--warning c-box--small">
    Small warning message
</div>

Negative

<div class="c-box c-box--negative">
    Error message
</div>
<div class="c-box c-box--negative c-box--small">
    Small error message
</div>

Accessibility notes

Even though color contrasts between text and background should be good enough out of the box (haha), please test that the same goes for nested elements, e.g. links or lists. A red Button in a red Box is not a wise choice, for example.

TIP

If using a Box as a validation alert, add role="alert" to the Box component and a reference to the input that caused the error, using aria-describedby:

<input type="text" aria-describedby="form-field-error" required>

<div role="alert" class="c-box c-box--negative">
  <!-- Do not reference this alert ^ element directly with aria-describedby -->
  <div id="form-field-error">
    <!-- Use a child element instead, and add JS to inject the alert here -->
  </div>     
</div>