<div class='card ~info !high'>
<strong>Hello world!</strong> This is what a card can look like.
</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.
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
Cards have full tone and priority support.
Low Priority
~neutral !low
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~positive !low
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~warning !low
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~critical !low
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~info !low
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~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 content">
<h4>~neutral !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~positive !low content">
<h4>~positive !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~warning !low content">
<h4>~warning !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~critical !low content">
<h4>~critical !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~info !low content">
<h4>~info !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~urge !low content">
<h4>~urge !low</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
</div>Normal Priority
~neutral !normal
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~positive !normal
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~warning !normal
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~critical !normal
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~info !normal
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~urge !normal
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 !normal content">
<h4>~neutral !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~positive !normal content">
<h4>~positive !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~warning !normal content">
<h4>~warning !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~critical !normal content">
<h4>~critical !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~info !normal content">
<h4>~info !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~urge !normal content">
<h4>~urge !normal</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
</div>High Priority
~neutral !high
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~positive !high
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~warning !high
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~critical !high
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~info !high
Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!
~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 content">
<h4>~neutral !high</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~positive !high content">
<h4>~positive !high</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~warning !high content">
<h4>~warning !high</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~critical !high content">
<h4>~critical !high</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~info !high content">
<h4>~info !high</h4>
<p>Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!</p>
</section>
<section class="card ~urge !high content">
<h4>~urge !high</h4>
<p>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 ~neutral !low 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>Something went wrong! Just kidding. This is just a static demonstration.
Example code
<alert class="card ~critical !high">
<p><b>Something went wrong!</b> Just kidding. This is just a static demonstration.</p>
</alert>Customization
| Name | Type | Default | Description |
|---|---|---|---|
--color-content |
color | — | sets the content (text) color |
--color-background |
color | — | sets the background 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.
