pattern-library 1 linked patterns checked
Fluent 2 React Card
Documents cards as containers for information and actions related to a single concept or object, with preview, header, footer, hierarchy, behavior, and accessibility guidance.
Read with a purpose
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Card list | Choose card list when each item needs more context, imagery, or mixed metadata than a dense row can comfortably show. | Each card represents one object or concept and exposes one primary identity that stays visible across all states. | Fluent card guidance supports one-object card containers with preview, header, footer, information hierarchy, behavior, and accessibility. |
Comparisons supported by this source
- Card list vs list view vs collection vs browse by category
Fluent card guidance supports cards as containers for one concept or object with preview, header, footer, hierarchy, behavior, and accessibility.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Microsoft Fluent. Last checked: .