Card
A card is a container that groups related content and actions about one subject, such as a place, a product or an article. Material 3 has a Card component; iOS groups the same content in list cells.
Why it matters
A card lets a feed hold items of different shapes and still scan as a list. It is also where most inconsistency in a UI hides: radius, padding and shadow set differently on every screen.
Because Apple has no card component, a design for both platforms has to decide whether a card or a grouped list row is the shared answer.
Card on iOS and Android
Also called Content card. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | No card: List cells in plain, grouped and inset grouped styles | Card: elevated, filled and outlined | Card |
| Card corner | 12 pt | 12 dp | platform/ |
| Elevation, resting | No named shadow ramp | 0 dp outlined and filled, 1 dp elevated | See below |
| Elevation, dragged | None | 8 dp, or 2 dp elevated | See below |
| Recommended mobile margin | Layout margins | 8 dp | See below |
In Appetite UI
Appetite UI Card is 340 wide at radius 24 with one fill, a hairline and dropShadow/xs. Where Material 3 changes the surface per style, Appetite UI keeps one surface and changes only its fill on Pressed. platform/card/corner is 12 on both platforms.
Example
A trip card holds a photo, a title, a price and a save button. On Android it can be an outlined card at rest; on iOS the same content can sit in an inset grouped list.
Common mistakes
- Putting a card in a card. Nest content, not containers.
- Making the whole card and a button inside it both tappable without a clear primary target.
- Using shadow on a tinted ground to separate cards. Use a hairline or a fill.
- Setting a different radius on each screen. Bind the corner to a token.
Questions
Does iOS have cards?
Not as a component. Apple groups content in list cells in plain, grouped and inset grouped styles. A card is a Material 3 component, and Appetite UI draws one for both platforms.
What are the Material 3 card styles?
Elevated, filled and outlined. In Material Components for Android an outlined and a filled card rest at 0 dp elevation and an elevated card at 1 dp.
Sources
The pages the facts above rest on, each read October 30, 2026.