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 !normal (default) priority is recommended.

Low Priority
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>
Example code
<span class="shield ~neutral !normal ml-1 mb-1">
  <span class="icon">
    <i class="fas fa-swatchbook fa-lg"></i>
  </span>
</span>

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

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

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

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

<span class="shield ~urge !normal 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 using CSS variables, 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 using CSS variables, so you'll never need to settle for &ldquo;good enough.&rdquo;
  </p>
  </div>
</div>

Customization

Name Type Default Description
--color-fill color sets background color
--color-content color sets icon color
--shield-padding-x size 1rem sets the x-padding
--shield-padding-y size 1rem sets the y-padding

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.