Layout / The visual dictionary

Card layout.

A collection organized into self-contained surfaces.

Also calledcardscard grid

See it in context

UI illustration

Discover

Collect

Create

What it is

A collection organized into self-contained surfaces. Keep each card's title, summary, and action together, with consistent spacing between cards.

When to use it

Use it when each item is a meaningful independent unit.

Know the difference

A card groups one item; a grid controls how many cards align.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Cards can appear as a vertical list on phones and expand into multiple columns on wider displays.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a card layout. Keep each card's title, summary, and action together, with consistent spacing between cards. Use it when each item is a meaningful independent unit. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Grid layout

Container

Dashboard