<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.
Low Priority (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 & 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 “good enough.”
</p>
</div>
</div>