Design System / Application UI / Layout

Layout

Panels, media objects, dividers, containers, and list containers.

Layout · 17 variants

How To Use This Page

Layout sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.

This page currently groups 20 examples so you can compare structure, emphasis, and density before choosing an implementation direction.

How The Content Is Grouped

  • The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
  • Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.

Start With

Basic card

A standard panel for grouping related content.

With header

Uses a separated header row above the body.

With header and footer

Common for confirmation or approval flows.

With ground body

Creates hierarchy by tinting the body region.

Well

An inset panel for secondary or supporting content.

Basic

Media left, content right.

Aligned to center

Centers avatar and text vertically.

Media on right

Swaps the emphasis by moving media to the end.

Panels

Basic card

A standard panel for grouping related content.

Card Title

This is a basic card panel with padding, a subtle border, and a light shadow. Use for grouping related content.

With header

Uses a separated header row above the body.

Panel Header

Panel body content goes here. This area can contain any elements.

Confirm Action

Are you sure you want to proceed? This action may have consequences.

With ground body

Creates hierarchy by tinting the body region.

Settings

This panel uses a subtle ground background in the body area to create visual hierarchy.

Well

An inset panel for secondary or supporting content.

Well Panel

A well creates an inset, recessed appearance. Good for secondary or supplementary content areas.

Media Objects

Basic

Media left, content right.

JD

Jane Doe

Full-stack engineer with expertise in React and Node.js. Passionate about clean code.

Aligned to center

Centers avatar and text vertically.

MK

Mark Kim

Product Designer

Media on right

Swaps the emphasis by moving media to the end.

Sara Lopez

Engineering lead responsible for platform infrastructure and developer tooling.

SL

Nested

Media objects can be nested for hierarchy.

PM

Project Manager

Overseeing delivery across multiple workstreams.

DW

Direct Report

Frontend engineer on the dashboard team.

Dividers

Simple

Separates two adjacent content regions.

Section one content
Section two content

With label

Useful for auth flows and alternative paths.

Sign in with email
or
Continue with SSO

With title

Elevates a divider into a section transition.

Previous section
New Section
Next section

With button

Places an action directly inside the divider.

Recent activity
Earlier activity

With toolbar

Combines count, controls, and a content boundary.

Results
24 items
Filtered content

Containers

Constrained with padded content

The standard full-page content wrapper.

max-w-7xl · px-6

Constrained container — the standard page-width wrapper. Keeps content readable on large screens.

Narrow constrained

A focused single-column container.

max-w-2xl · px-6

Narrow container — ideal for forms, articles, or any focused single-column layout.

Full width on mobile

Edge-to-edge on small screens, padded on larger ones.

px-0 sm:px-6

No padding on mobile, horizontal padding on sm+ breakpoints. Common for card-to-edge pattern.

List Containers

Simple with dividers

A straightforward vertical list.

  • Alice Johnson
  • Bob Smith
  • Carol White
  • Dan Lee

Card with dividers

A list inside a bordered panel.

  • Alice JohnsonDesigner
  • Bob SmithEngineer
  • Carol WhitePM
  • Dan LeeQA

Separate cards

Each row stands alone as its own container.

  • Alice JohnsonDesigner
  • Bob SmithEngineer
  • Carol WhitePM