Card

A block element for mostly self-contained units of content


  • Display

    Block

  • Selectors

    .card
  • Source

    GitHub ↗

  • Features

    TonesPriorities

Hello world! This is what a card can look like.
<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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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.

Color Theory Product Dogs
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.