--- title: "Card UI: anatomy, variants and examples | Kombai" description: "A card frames the content and actions about one thing, like a home, a recipe or a project, so a set of them is easy to browse." canonical_url: https://kombai.com/glossary/card/ author: "The Kombai Team" --- # Card A card frames the content and actions about one thing, like a home, a recipe or a project, so a set of them is easy to browse. - Also called: tile - Platforms: Web, Mobile - In the Kombai gallery: [171 web designs](https://kombai.com/gallery/web/card/), [179 mobile designs](https://kombai.com/gallery/mobile/card/) - [Oxbow](https://kombai.com/gallery/inspirations/card-web-30/) (Web) - [Perch](https://kombai.com/gallery/inspirations/card-ios-115/) (Mobile) - [Percale](https://kombai.com/gallery/inspirations/card-web-14/) (Web) ## What is a card? A card is a contained block, set apart by a border, a background or a shadow, that holds the content and actions about one thing. Cards repeat in a grid, a row or a stack, and each one usually opens a page with the full detail. - Each card stands on its own: often an image, a title, a few details and one main action. - Cards in a set share one layout, so people can scan them side by side. ## When to use card - **Browsing mixed content.** Items with an image and a few facts, like listings, recipes or courses. - **Items of equal weight.** A set people look over side by side before opening one. - **Separate widgets.** Dashboard metrics or settings groups that each need their own frame. ## When not to use one - **Dense data.** Many fields that people compare across items belong in a table. - **Long text-only lists.** Inboxes and settings read faster as a stacked list. - **A single block of content.** A card around the only thing on a page adds a frame for nothing. ## Anatomy 1. **Container**: Frames one item 2. **Media**: Photo, preview or icon 3. **Title**: Names the item, links to it 4. **Details**: Price, facts or status 5. **Action**: An extra like Save 6. **States**: Rest, hover, focus, loading ## Variants We sorted every card design in the Kombai gallery and found six patterns. ### 1. Image on top The default. A photo fills the top, with the title, a few facts and a price or rating below. Listings, products and trails all use it. - [Ferngate](https://kombai.com/gallery/inspirations/card-ios-122/) (Mobile) - [Yarrow](https://kombai.com/gallery/inspirations/card-web-12/) (Web) - [Voyanta](https://kombai.com/gallery/inspirations/card-ios-175/) (Mobile) ### 2. Text over image The title sits on the photo itself, over a dark gradient that keeps it readable. Common for programs, recipes and editorial picks. - [Programs](https://kombai.com/gallery/inspirations/card-ios-132/) (Mobile) - [Wayfare](https://kombai.com/gallery/inspirations/card-ios-153/) (Mobile) - [Ladle](https://kombai.com/gallery/inspirations/card-ios-37/) (Mobile) ### 3. Horizontal cards A thumbnail on one side and the details on the other, so cards stack in a column like a richer list. - [Verdigris](https://kombai.com/gallery/inspirations/card-ios-4/) (Mobile) - [Sillage](https://kombai.com/gallery/inspirations/card-web-43/) (Web) - [Saltcellar](https://kombai.com/gallery/inspirations/card-web-146/) (Web) ### 4. Stat cards One number with its label and a progress bar or comparison, repeated in a row or grid of equal cards. - [Sorrel](https://kombai.com/gallery/inspirations/card-web-11/) (Web) - [Sundial](https://kombai.com/gallery/inspirations/card-ios-148/) (Mobile) - [Contrail](https://kombai.com/gallery/inspirations/card-ios-52/) (Mobile) ### 5. Choice cards Large cards for a single decision, like an account type or a setup path, each with a short explanation of what it means. - [Quoin](https://kombai.com/gallery/inspirations/card-web-33/) (Web) - [Verso](https://kombai.com/gallery/inspirations/card-ios-104/) (Mobile) - [Fernway](https://kombai.com/gallery/inspirations/card-ios-92/) (Mobile) ### 6. Cards with actions A record with its status and the next step on the card itself, like Request signatures, Claim or a yes or no answer. - [Contour Rentals](https://kombai.com/gallery/inspirations/card-web-8/) (Web) - [Voyara](https://kombai.com/gallery/inspirations/card-ios-36/) (Mobile) - [Voyara](https://kombai.com/gallery/inspirations/card-ios-65/) (Mobile) ## Where cards show up ### Search results Restaurants, flights and models in a results feed, each card carrying the facts people compare. - [Kerbside](https://kombai.com/gallery/inspirations/card-ios-53/) (Mobile) - [Voyara](https://kombai.com/gallery/inspirations/card-ios-43/) (Mobile) - [Basalt](https://kombai.com/gallery/inspirations/card-web-148/) (Web) ### Templates and projects Galleries of templates, agents and projects, where each card is a starting point with a one-line description. - [Halcyon](https://kombai.com/gallery/inspirations/card-web-4/) (Web) - [Lorewell](https://kombai.com/gallery/inspirations/card-web-117/) (Web) - [Fernwood](https://kombai.com/gallery/inspirations/card-web-137/) (Web) ### Feeds Posts, link previews and essay picks in social and reading apps, one card per post. - [Sorrel](https://kombai.com/gallery/inspirations/card-ios-17/) (Mobile) - [Margin](https://kombai.com/gallery/inspirations/card-web-95/) (Web) - [Recto](https://kombai.com/gallery/inspirations/card-ios-48/) (Mobile) ### Plans and pricing Plan cards side by side, each with a price, a feature list and one button. - [Mainspring](https://kombai.com/gallery/inspirations/card-web-9/) (Web) - [Basalt](https://kombai.com/gallery/inspirations/card-web-126/) (Web) - [Fern & Fig](https://kombai.com/gallery/inspirations/card-ios-173/) (Mobile) ## Card vs similar components | | [Card](https://kombai.com/glossary/card/) | [Stacked list](https://kombai.com/glossary/stacked-list/) | [Gallery](https://kombai.com/glossary/gallery/) | [Table](https://kombai.com/glossary/table/) | |---|---|---|---|---| | Shows | One item per framed block | One item per row | Mostly images | Rows and columns of data | | Layout | Grid, rail or stack | A single column | An even or masonry grid | Fixed columns | | Best for | Mixed content with images and actions | Inboxes, settings and long lists | Photos, products and portfolios | Comparing many records | ## Build notes - Put the title in a heading and make it the link, instead of wrapping the whole card in . - Stretch the title link over the card with an absolutely positioned ::after to make all of it clickable. - Raise extra buttons, like Save, above the stretched link, and give each one an accessible name. - Group a set of cards in a