# 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.

Page: https://www.appetiteui.com/glossary/card. Card design in mobile apps: Material 3 Card and iOS. Also called Content card.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No card: List cells in plain, grouped and inset grouped styles | Card: elevated, filled and outlined | Card |
| 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 |
| Card corner | 12 pt | 12 dp | `platform/card/corner` |

## 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

1. [Material Design 3: Cards](https://m3.material.io/components/cards/overview)
2. [Material Components for Android: Card](https://github.com/material-components/material-components-android/blob/master/docs/components/Card.md)
3. [Apple Human Interface Guidelines: Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables)

## Related

- Docs: [Card](https://www.appetiteui.com/docs/card)
- Docs: [Effects](https://www.appetiteui.com/docs/effects)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Corner radius](https://www.appetiteui.com/glossary/corner-radius)
- Glossary: [Elevation](https://www.appetiteui.com/glossary/elevation)
- Glossary: [List row](https://www.appetiteui.com/glossary#list-row)