Supra

A small element that's less disruptive than its sibling, the label


  • Display

    Inherited

  • Selectors

    .supra
  • Source

    GitHub ↗

  • Features

    TonesPriorities

Have fun

<p class='supra'>Have fun</p>

Overview

The supra element is a label-like element that is less visually prominent than an actual label. It’s helpful for when you want to apply some kind of heading or label to a section that should be less prominent than the content around it.

Considerations

Spacing — The supra defines no margin on its own. That means that you’ll need to manually position it inside your layout.

Overuse — The supra is a jack of all trades. Try not to overuse it: while it isn’t visually prominent, it is certainly visually distinct. Overuse will be apparent!

Variants

The supra has full contextual tone and priority support.

Up is down

Up is down

Up is down

Up is down

Up is down

Up is down

Example code
<p class="supra ~neutral !low">Up is down</p>

<p class="supra ~positive !low">Up is down</p>

<p class="supra ~warning !low">Up is down</p>

<p class="supra ~critical !low">Up is down</p>

<p class="supra ~info !low">Up is down</p>

<p class="supra ~urge !low">Up is down</p>

Accessibility

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

New Release

Our best album yet!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit vel arcu sed cursus. Morbi eget diam commodo, bibendum tellus nec, viverra diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ac facilisis mauris. Aenean luctus arcu velit.

Example code
<p class="supra">New Release</p>
<p class="font-medium text-2xl text-neutral-900 mb-2">Our best album yet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit vel arcu sed cursus. Morbi eget diam commodo, bibendum tellus nec, viverra diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ac facilisis mauris. Aenean luctus arcu velit.</p>

Customization

Name Type Default Description
--supra-letter-spacing size 0.06rem sets the letter spacing
--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.