<div class='card ~info @high'>
<strong>Hello world!</strong> This is a card... inside another card. In practice, you probably wouldn't want to do this. No need to nest cards. They're great on their own!
</div>
<div class='card mt-2'>
<strong>Hi!</strong> This is also a card...
</div>Overview
Cards are an extremely versatile element. They’re very helpful when creating any kind of self-contained content block — whether that’s an alert, form section, or anything else.
There are two main types of cards in a17t: basic cards and toned cards. Basic cards are simple and use only a single CSS selector, .card. A basic card will have a transparent background and a subtle gray border with a bit of box shadow. Toned cards introduce — you guessed it — color, and you can access them using .card ~color (for example, card ~pink).
As you might expect, toned cards have full priority support, so you can apply the @low and @high classes however you’d like. Applying these classes to basic cards is not recommended.
Considerations
Overuse — Cards are very easy to overuse. When creating a card, ask yourself “do I really need a card for this?” If the answer is no, then don’t. Cards look great and get the job done, but should be used in moderation. (If everything in your interface is in a card, is anything really in a card?)
Semantic structure — It’s tempting to always use a .card with a <div>. Often, there’s a more descriptive tag available, like <article> or <section>. Because a .card has little semantic meaning on its own, using it with a <div> can lead to inscrutable code.
Variants
Basic Cards
Basic cards are simple, and have a simple white background. This is often the best choice — applying color to cards can often be overwhelming. To create a basic card, a simple <div class="card">...</div> will suffice.
This is basic card. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
Example code
<section class="card">
<p><strong>This is basic card.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>Toned Cards
Cards have full tone and priority support. Use these in moderation, as they are very visually prominent! Overusing too many toned cards can quickly make an interface overwhelming.
Low Priority
This is ~neutral !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~positive !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~warning !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~critical !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~info !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~urge !low. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
Example code
<div class="md:grid grid-cols-2 gap-4">
<section class="card ~neutral @low">
<p><strong>This is ~neutral !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~positive @low">
<p><strong>This is ~positive !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~warning @low">
<p><strong>This is ~warning !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~critical @low">
<p><strong>This is ~critical !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~info @low">
<p><strong>This is ~info !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~urge @low">
<p><strong>This is ~urge !low.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
</div>High Priority
This is ~neutral !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~positive !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~warning !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~critical !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~info !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
This is ~urge !high. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
Example code
<div class="md:grid grid-cols-2 gap-4">
<section class="card ~neutral @high">
<p><strong>This is ~neutral !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~positive @high">
<p><strong>This is ~positive !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~warning @high">
<p><strong>This is ~warning !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~critical @high">
<p><strong>This is ~critical !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~info @high">
<p><strong>This is ~info !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~urge @high">
<p><strong>This is ~urge !high.</strong> Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
</div>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
Alex Hershenstein
Alex is a staff designer on the product team.
Example code
<div class="card md:flex max-w-lg">
<img class="rounded-full mx-auto h-20 w-20 md:mr-6 mb-6" src="/assets/profile_image.png">
<div class="flex-grow text-center md:text-left mb-0">
<h4 class="heading my-0">Alex Hershenstein</h4>
<p class="mb-3 mt-2">Alex is a staff designer on the product team.</p>
<div>
<span class="chip ~info mb-1">Color Theory</span> <span class="chip ~info mb-1">Product</span> <span
class="chip ~info mb-1">Dogs</span>
</div>
</div>
</div>Example code
<form class="card p-0 max-w-sm">
<section class="p-4 flex flex-col gap-4">
<div>
<label class="label" for="toolkit">Current job</label>
<div class="select ~neutral @low my-1">
<select>
<option>Teacher</option>
<option>Engineer</option>
<option>Firefighter</option>
<option>Other</option>
</select>
</div>
<p class="support">If you are a student, select 'other.'</p>
</div>
<div>
<label class="label" for="toolkit">Favorite toolkit</label>
<input id="toolkit" type="text" class="input ~critical !normal my-1" placeholder="At least 8 characters..."
value="Not a17t">
<p class="support ~critical">The correct answer is a17t!</p>
</div>
</section>
<section class="section ~neutral flex gap-2 p-4">
<span class="button ~info @high">Submit</span>
<span class="button ~neutral @low">Save draft</span>
</section>
</form>