This is a support. Take note!
<input class='input ~neutral 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.
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>