Support

An element to apply a supporting label (often to a form field)


  • Display

    Inherited

  • Selectors

    .support
  • Source

    GitHub ↗

  • Features

    TonesPriorities

This is a support. Take note!

<input class='input my-2' type='text' placeholder='Miles McCain'>
<p class='support'>This is a support. Take note!</p>

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 and --color-muted.

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 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>

Customization

Name Type Default Description
--color-muted color sets the color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.