Shield

An element to make icons look good at any size


  • Display

    Inline Flex

  • Selectors

    .shield
  • Source

    GitHub ↗

  • Features

    TonesPriorities

<span class="shield ~info">
  <span class="icon">
    <i class="fas fa-atom fa-lg"></i>
  </span>
</span>

Overview

Icons are fundamental to many designs, but they often don’t look good on their own. They usually need to be paired with some text of approximately the same size — for example, in a portal. The shield makes it possible for icons to look good on their own by giving them a muted circular background — although this behavior, like everything else in a17t, can be customized.

Considerations

Responsiveness — What looks proportional on desktop might not look right on mobile, and vice versa. As always, be sure to test your design on all screen sizes to ensure a reliable experience.

Padding — By default, shields’ padding is defined in rems. If you’re using an icon that’s larger than the root em size, you’ll want to manually adjust the padding using the --shield-padding-x and --shield-padding-y variables.

Icons — For the best experience, a shields’ sole element should be an icon element. If you’re using a shield in another context, though, don’t feel bound by this recommendation.

Variants

Icons have full tone and priority support, although using the @low (default) priority is recommended.

Example code
<span class="shield ~neutral @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~positive @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~warning @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~critical @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~info @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~urge @low ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>
High Priority
Example code
<span class="shield ~neutral @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~positive @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~warning @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~critical @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~info @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

<span class="shield ~urge @high ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

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

Atomic & flexible

a17t provides core, single-class interface elements and empowers you to assemble them your way. And everything is easily customizable through Tailwind CSS, so you'll never need to settle for “good enough.”

Example code
<div class="flex">
  <div class="shield ~info mr-4 self-start">
    <span class="icon">
      <i class="fas fa-pen-nib fa-lg"></i>
    </span>
  </div>
  <div class="flex-grow">
  <h4 class="heading text-xl mb-1">Atomic &amp; flexible</h4>
  <p>a17t provides core, single-class interface elements and empowers you to assemble them your way. And
    everything is easily customizable through Tailwind CSS, so you'll never need to settle for &ldquo;good enough.&rdquo;
  </p>
  </div>
</div>