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!
Hi! This is also a card...
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.
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.
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.
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.
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).