Overview

The support element is used for visually secondary labels (usually for supporting—but non-critical—information). They are often helpful for building form interfaces. The support element is very simple: it applies a small font size.

Considerations

Intrusiveness — Supports are intended to almost fade into the background; you’re only supposed to see it if you’re looking for it. For a more intrusive element, use a label.

Variants

Supports have full tone and priority support. They will automatically look appropriate in most contexts.

This is a neutral support.

This is a positive support.

This is a warning support.

This is a critical support.

This is a info support.

This is a urge support.

Example code

<p class="support ~neutral @low">This is a neutral support.</p>

<p class="support ~positive @low">This is a positive support.</p>

<p class="support ~warning @low">This is a warning support.</p>

<p class="support ~critical @low">This is a critical support.</p>

<p class="support ~info @low">This is a info support.</p>

<p class="support ~urge @low">This is a urge support.</p>

Accessibility

Be mindful of font size and color. By default, support elements can be very small. Combined with their sometimes muted color, they can sometimes be hard to read. While they should still pass accessibility guidelines, they don’t excel at them.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

There are two right answers.

Example code

<input class="input ~neutral my-1" id="question" type="text" value="The Recurse Center">
<p class="support">There are two right answers.</p>

That's wrong. Stanford.

Example code

<div class="~critical @low">
  <input class="input my-1" type="text" value="Berkeley">
  <p class="support">That's wrong. Stanford.</p>
</div>