Overview
Cards are used to group, summarize, and highlight related information in a clear, scannable format. They help establish visual hierarchy, reduce cognitive load, and make it easy for learners to compare options, identify key ideas, and navigate content consistently across devices.
Common Pitfalls to Avoid
- Using header images with overlaid text
- Including more than 500 characters of content in a card
- Using card header images with inconsistent heights
- Using single column cards
[Example]
Umami
A savory taste often described as meaty or broth-like, found in foods like soy sauce, mushrooms, and aged cheeses. It’s considered the fifth basic taste, alongside sweet, sour, salty, and bitter, and adds depth and richness to both simple and complex dishes.
Al Dente
An Italian term meaning “to the tooth,” used to describe pasta that is cooked until tender but still slightly firm when bitten. Cooking pasta al dente preserves texture, prevents overcooking, and allows sauces to cling better, enhancing the overall flavor experience.
Fermentation
A natural process in which microorganisms like yeast or bacteria convert sugars into alcohol, acids, or gases. Fermentation is used to create foods like yogurt, kimchi, bread, and kombucha, enhancing flavor, texture, and nutritional value while preserving the product.
Mirepoix
A French cooking base made from diced onions, carrots, and celery, usually sautéed in butter or oil. Mirepoix serves as the flavor foundation for soups, stews, sauces, and braises, adding depth, aroma, and a subtle sweetness to a wide range of dishes
Tempering
A cooking technique where ingredients, often chocolate or eggs, are gently heated to stabilize texture or prevent curdling. In chocolate, tempering ensures smoothness and a glossy finish; in eggs, it prevents scrambling when added to hot liquids.
Caramelization
A cooking process in which sugars break down and brown when exposed to heat, creating rich flavors and aromas. Caramelization enhances sweetness, adds complexity, and contributes to the golden color found in roasted vegetables, seared meats, and baked goods.
CDD Tag
<cards></cards>
Guidelines
Do
ID
Use Cards to Highlight Resources
Cards are a great way to highlight different resources because they create clear visual hierarchy and chunk information into easily scannable sections, which are key UX principles that improve comprehension and reduce cognitive load. Cards offer consistent structure, making it simple for learners to compare options, understand purpose at a glance, and quickly navigate to what they need.
ID
Use Cards to Highlight Key Definitions
Cards for terminology definitions are effective because they emphasize key terms in a clean, scannable format. This reduces cognitive load and helps learners quickly find and understand important concepts. Their consistent structure also supports pattern recognition and stays accessible across devices.
ID
Use Cards to Organize and Summarize Content
Cards is a strong choice for content that benefits from summarizing and chunking because they emphasize key ideas while grouping information into clear, logical categories. This supports core UX principles like scannability and reduced cognitive load, helping learners quickly grasp main points. Cards also maintain a consistent, easy-to-navigate structure that works well across all devices.
ID
Production
Keep Card Structure Consistent
When using a group of cards, maintain the same structure across all cards to create a clear and predictable learning experience. If one card includes a header, image, or body text, all cards in the set should include the same element in a similar position. However, this does not apply to bullets or lists. Use bullets only when presenting multiple items. Consistent card structures make content easier to scan, compare, and understand.
Do Not
ID
Content over 500 characters in a card is discouraged because cards are designed for concise, scannable information. Longer text can overwhelm learners, reduce readability, and make it harder to quickly identify key points. It also introduces imbalances in vertical white space, disrupting the visual flow and undermining UX principles like clarity, hierarchy, and ease of navigation.
ID
Production
Cards should never be used in a single column. Cards are intended for grouped or themed content, where multiple related items are presented together to support scanning or comparison (for example, a set of related definitions). Using cards in a single column breaks this intended use and is often done only to achieve a specific visual style. If the goal is to visually emphasize or separate content, cards are not the appropriate solution. In those cases, consider alternatives such as Callout Boxes or Tip Boxes, which provide emphasis without implying grouping or comparison.
Production
Use Images with Inconsistent Heights
Card header images that differ in height is discouraged because inconsistent image sizes create visual imbalance and disrupt the flow of content. This makes it harder for learners to scan and compare information quickly, undermining UX principles like consistency, clarity, and hierarchy. Maintaining uniform header heights ensures a clean, predictable layout that supports readability and an organized user experience.
Production
Do not place text over images in cards. Cards have limited space, and adding text on top of images often reduces contrast and readability, making content difficult for learners to scan or understand. This practice can create accessibility barriers for users relying on screen readers or viewing on small screens, and it increases cognitive load. For inclusive and effective design, keep text separate from images and focus on clarity, scannability, and consistent presentation across devices.