Card UI design: how mobile apps actually use cards

August 13, 2026 · 8 min read

1. A card is an entry point, not a container

The useful test is whether the card leads somewhere. If tapping it opens a detail view, it is a card. If it is a box drawn around static content that goes nowhere, it is a panel, and drawing it like a card teaches users to tap something that does not respond. Content libraries make this obvious: Headspace (est. $2M/mo) and Calm (est. $2.75M/mo) are both essentially browsers over a catalog, so nearly every surface in them is a preview that leads to a session.

2. One card, one subject

A card should describe exactly one thing: one track, one workout, one article, one recipe. The moment a card carries two subjects it needs two tap targets, and a card with two tap targets is a layout problem wearing a rounded corner. If you find yourself adding a second headline, you probably want a section, not a card.

3. Three shapes cover most feeds

Across shipped apps, card layouts collapse into roughly three shapes, and mixing more than two of them in one scroll gets noisy fast.

• The list row. Full width, fixed height, small leading thumbnail, one or two lines of text, optional trailing action. The densest option and the right default for anything a user scans by title.
• The media card. Image on top doing the work, title and metadata beneath. Used when the artwork is the reason to tap. Costs roughly three times the vertical space of a list row, so it only pays when the image genuinely sells the item.
• The stat tile. Small, often two per row, holding one number and its label. This is the dashboard card, and it is a different animal: it is read, not browsed.

Health and fitness apps run all three in one product, which makes them good study material. Clue (est. $1.25M/mo) and Hevy (est. $750k/mo) both have to mix a data surface with a content surface inside the same app.

4. The hit area is the design

Whole-card tapping is the expectation. Every element inside a card that is not the primary destination, a save icon, an overflow menu, a play button, is competing with that expectation and needs enough separation and padding that a thumb aiming at the card does not hit it by accident. The practical rule that survives usability testing: at most one secondary target per card, placed in a consistent corner, with a target box well beyond its visual size.

5. Elevation is mostly over

The drop shadow was doing a job that spacing and radius now do better. Current mobile layouts separate cards with generous gaps, a consistent corner radius, and a slight surface tint against the page background. Shadows survive mainly for genuinely floating things: sheets, dialogs, and elements that overlap other content.

Dark interfaces force the issue, because a dark shadow on a near-black background does not exist. Dark-first apps replace elevation with a lighter surface color or a hairline border, which is one of the reasons a light design does not translate to dark by inverting the palette. We measured how common that is across the library in the dark mode breakdown.

6. Horizontal rails are cards with a different job

The horizontal shelf, a titled row of cards that scrolls sideways, is how catalogs present many categories without an infinite vertical page. It buys breadth and costs depth: users rarely scroll a rail past the third or fourth item, so anything past that position is close to unpublished. Music and audio apps live on this pattern, which you can see across YouTube Music (est. $38M/mo) and Deezer (est. $8M/mo), and it shows up again in saved libraries and collections, where the same shelf structure organizes content the user already owns.

7. Dashboard cards are read, not browsed

Stat tiles follow different rules. They should be legible without a tap, which means the number is the largest thing in the tile and the label is secondary. A tile that requires you to open it to learn its value has failed at the only job it had. Tracking-heavy apps like Strava (est. $16M/mo) put a lot of design effort into this surface, and you can compare approaches across our tracking and insights gallery.

8. When a card is the wrong answer

Cards cost vertical space and visual weight, and both are scarce on a phone. Skip the card when the items are uniform and text-only, when the list is long enough that density matters more than presentation, or when the screen is already carrying a tab bar, a search field, and a filter row. A screen where every region is a rounded rectangle has no hierarchy left to give.

How to use this

The fastest way to make card decisions is to look at products in your category that already made them, in full flows rather than single shots, because the interesting part is how a card looks next to the ten screens around it. Every screen in the library sits next to the app’s estimated revenue and downloads, so you can choose your references by outcome rather than by taste.

A note on the numbers: revenue figures cited here are third-party monthly estimates from our library, useful for comparing magnitude, not audited financials.

Frequently asked questions