---
url: /foundations/layout/canonical-examples/overview.md
description: >-
  Canonical layout examples are designs for common screen layouts across all
  breakpoints
---

# Canonical layout examples

Canonical layout examples are designs for common screen layouts across all breakpoints

**Overview** · [Feed](feed.md) · [List-detail](list-detail.md) · [Supporting pane](supporting-pane.md)

![Canonical layout examples](/assets/acd43809-mrodw83s-understanding-layout.Fo-wBEgJ.webp)

Canonical layout examples demonstrate how to implement the layout [scaffold](../scaffold/overview.md "A scaffold is a fundamental UI design structure that provides a standard platform for assembling key screen components."). They’re also available in code to provide a strong starting point for your product.

Each layout example considers common use cases and components to address expectations and user needs for how products adapt across [breakpoints](../breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") (previously window size classes).

![A messaging app on desktop mapping bar, rail, and pane regions.](/assets/682778e8-mp72kkvb-ld-adapt-c.BpKVPToY.webp)

A layout scaffold can include bar, rail, and pane regions

## Availability & resources

| Type           | Resource                                                                                                                       | Status    |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------- |
| Design         | [M3 Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460)                                              | Available |
| Implementation | [Jetpack Compose: Canonical layouts](https://developer.android.com/develop/ui/compose/layouts/adaptive/canonical-layouts)      | Available |
| Implementation | [Android Views (MDC-Android): Canonical layouts](https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts) | Available |
| Implementation |                                                                                                                                |           |

## Examples

There are three canonical layout examples: feed, list-detail, and supporting pane. Each example has configurations for compact, medium, and expanded breakpoints.

Use these canonical examples as a starting point to create layouts for a product.

### Feed

Use a feed layout to arrange elements like cards in a configurable grid for a quick, convenient view of a large amount of content.



[More on feed layouts](feed.md)

![A course list in a feed layout at a medium breakpoint. 8 cards in a single pane, with bar above and leading rail.](/assets/26152ca3-mp72yab6-feed-adapt-b.B9OK8KUd.webp)

### List-detail

Use a list-detail layout to display explorable lists of items alongside each item’s details. This layout divides the window into two side-by-side panes.

[More on list-detail layouts](list-detail.md)

![List-detail layout of a messaging app. Pane 1 lists all conversations. Pane 2 shows the selected message.](/assets/77a294c1-mp72ypkq-ld-adapt-b.keq-LGbe.webp)

### Supporting pane

Use a supporting pane layout to organize content into primary and secondary sections:

* Primary display area: Contains the main content and occupies the majority of the window (typically about two-thirds)
* Secondary display area: Presents supporting content in a panel that takes up the remainder of the space

[More on supporting pane layouts](supporting-pane.md)

![Supporting pane layout. The primary pane shows course details. The secondary pane lists “Lessons in this course”.](/assets/16e35b36-mp72z1no-sp-adapt-b.CuenOZzQ.webp)

## Advanced custom layouts

To create a custom layout, build on top of canonical layouts or layer [scaffold](../scaffold/overview.md "A scaffold is a fundamental UI design structure that provides a standard platform for assembling key screen components.") elements.

### Layering

Use the [levitate](../scaffold/panes.md#96bf71b8-04b8-4fff-97c7-9bc782fbf401) adaptive strategy to create a layered layout. Layering panes above other content can create a focused, task-oriented experience such as:

* Reviewing a shopping basket
* Responding to comments
* Creating a calendar event

![Custom layout. A shopping basket floats above a clothing product page.](/assets/de8f6b5e-mp731djr-acl-adapt-b2.Byx070c0.webp)

Layering panes helps people focus on a specific task