--- layout: element tab: elements subtab: element-card category: Layout title: Card description: A block element for mostly self-contained units of content source: https://github.com/milesmcc/a17t/blob/master/src/layout/card.js selectors: - .card features: - Tones - Priorities display: Block examples: - "
\n Hello world! 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!\n
\n
\n Hi! This is also a card...\n
" --- # 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 `
`. Often, there's a more descriptive tag available, like `
` or `
`. Because a `.card` has little semantic meaning on its own, using it with a `
` 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 `
...
` will suffice. {% capture example %}

This is basic card. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!

{% endcapture %} {% include example.html code=example %} ### 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. {% for priority in site.priorities %} ##### {{priority|capitalize}} Priority {% capture example %}
{% for tone in site.tones %}

This is ~{{tone}} !{{priority}}. Lorem ipsum dolor sit amet. This is a box. Be careful — you never know what's inside!

{% endfor %}
{% endcapture %} {% include example.html code=example classes="bg-neutral-100" %} {% endfor %} # Accessibility {% include accessibility_defaults.html %} # Examples {% capture example %}

Alex Hershenstein

Alex is a staff designer on the product team.

Color Theory Product Dogs
{% endcapture %} {% include example.html code=example classes="bg-neutral-100"%} {% capture example %}

If you are a student, select 'other.'

The correct answer is a17t!

Submit Save draft
{% endcapture %} {% include example.html code=example %} {% include todo_more.html %}