---
title: "Stacked list UI: anatomy, variants and examples | Kombai"
description: "A stacked list puts items in a single column of rows that share one layout, so people can scan down it and pick one."
canonical_url: https://kombai.com/glossary/stacked-list/
author: "The Kombai Team"
---

# Stacked list

A stacked list puts items in a single column of rows that share one layout, so people can scan down it and pick one.

- Also called: list view
- Platforms: Web, Mobile
- In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/stacked-list/), [165 mobile designs](https://kombai.com/gallery/mobile/stacked-list/)

- [Hollo](https://kombai.com/gallery/inspirations/stacked-list-ios-60/) (Mobile)
- [Elderbough](https://kombai.com/gallery/inspirations/stacked-list-web-14/) (Web)
- [Fernway Supply](https://kombai.com/gallery/inspirations/stacked-list-ios-52/) (Mobile)

## What is a stacked list?

A stacked list is a single column of rows, one per item, each laid out the same way. A row often starts with an avatar, icon or thumbnail, carries a title and a line of detail, and ends with a time, a value, a switch or a chevron. Selecting a row usually opens the item.

- Every row follows one layout, so the eye runs straight down the column.
- Thin rules or even spacing separate the rows.

## When to use stacked list

- **Many similar items.** Messages, contacts, results or payments with a title and a little detail.
- **Small screens.** One column fits a phone without squeezing anything.
- **Settings and pickers.** Rows of options, each with a switch, a value or a chevron.

## When not to use one

- **Comparing several fields.** If people compare values across items, use a table.
- **Image-led items.** Products and places that sell on their photos read better as cards.
- **Nested items.** Items inside other items need a tree or an accordion.

## Anatomy

1. **Leading visual**: Avatar, icon or thumbnail
2. **Title**: Names the item
3. **Supporting text**: One line of detail
4. **Trailing element**: Time, count or chevron
5. **Divider**: Separates the rows
6. **States**: Unread, read, hover, focus

## Variants

We sorted every stacked list design in the Kombai gallery and found six patterns.

### 1. Avatar rows

A round photo or initials, a name and a line about the person, often with a Follow button at the end.

- [Everloop](https://kombai.com/gallery/inspirations/stacked-list-ios-68/) (Mobile)
- [Odile Marchetti](https://kombai.com/gallery/inspirations/stacked-list-web-26/) (Web)
- [Fernwell](https://kombai.com/gallery/inspirations/stacked-list-ios-142/) (Mobile)

### 2. Thumbnail rows

A square image beside a title and a short description, used for menu items, articles and songs.

- [Grainhouse](https://kombai.com/gallery/inspirations/stacked-list-ios-43/) (Mobile)
- [Northline](https://kombai.com/gallery/inspirations/stacked-list-ios-92/) (Mobile)
- [Perilune](https://kombai.com/gallery/inspirations/stacked-list-web-19/) (Web)

### 3. Settings rows

Icon, label and a chevron, a value or a switch, gathered into groups with a little space between them.

- [Marlow](https://kombai.com/gallery/inspirations/stacked-list-ios-71/) (Mobile)
- [Marquee Live](https://kombai.com/gallery/inspirations/stacked-list-ios-51/) (Mobile)
- [Halcyon TV](https://kombai.com/gallery/inspirations/stacked-list-ios-41/) (Mobile)

### 4. Rows grouped by date

Payments, activity and history under Today, This week or dated headers, with the amount or time at the end of each row.

- [Perch](https://kombai.com/gallery/inspirations/stacked-list-ios-37/) (Mobile)
- [Terawa](https://kombai.com/gallery/inspirations/stacked-list-ios-124/) (Mobile)
- [Halcyon Wallet](https://kombai.com/gallery/inspirations/stacked-list-ios-108/) (Mobile)

### 5. Option rows

Full-width rows to pick one answer or several, like an industry, a relationship or a country from a searchable list.

- [Tessera](https://kombai.com/gallery/inspirations/stacked-list-ios-49/) (Mobile)
- [Ambit](https://kombai.com/gallery/inspirations/stacked-list-ios-129/) (Mobile)
- [Orbit](https://kombai.com/gallery/inspirations/stacked-list-ios-90/) (Mobile)

### 6. Checklists

Rows with a checkbox at the start, for tasks, shopping items and setup steps that people tick off.

- [Marigold](https://kombai.com/gallery/inspirations/stacked-list-ios-101/) (Mobile)
- [Thymely](https://kombai.com/gallery/inspirations/stacked-list-ios-73/) (Mobile)
- [Naveshire](https://kombai.com/gallery/inspirations/stacked-list-web-46/) (Web)

## Where stacked lists show up

### Inboxes

Email, chat and call threads: sender, a one-line preview, the time and an unread marker.

- [Postlane](https://kombai.com/gallery/inspirations/stacked-list-ios-136/) (Mobile)
- [Kettlefold](https://kombai.com/gallery/inspirations/stacked-list-web-32/) (Web)
- [Kestrel](https://kombai.com/gallery/inspirations/stacked-list-ios-109/) (Mobile)

### Search results

Stores, companies and tasks returned for a query, often split into sections by type.

- [Tallyback](https://kombai.com/gallery/inspirations/stacked-list-ios-135/) (Mobile)
- [Kindred](https://kombai.com/gallery/inspirations/stacked-list-ios-121/) (Mobile)
- [Marlow](https://kombai.com/gallery/inspirations/stacked-list-ios-126/) (Mobile)

### Workspace lists

Pages, routines and recent files in work tools, one row each with when it was last touched.

- [Orrisfold](https://kombai.com/gallery/inspirations/stacked-list-web-41/) (Web)
- [Pomandry](https://kombai.com/gallery/inspirations/stacked-list-web-42/) (Web)
- [Bisqueline](https://kombai.com/gallery/inspirations/stacked-list-web-33/) (Web)

## Stacked list vs similar components

| | [Stacked list](https://kombai.com/glossary/stacked-list/) | [Table](https://kombai.com/glossary/table/) | [Card](https://kombai.com/glossary/card/) | [Accordion](https://kombai.com/glossary/accordion/) |
|---|---|---|---|---|
| Shows | One item per row | Rows and columns of data | One item per framed block | Sections that open and close |
| Fields per item | A title and a line or two | Many, in fixed columns | A few, plus an image | A header, detail hidden |
| Best for | Inboxes, settings and results | Comparing many records | Browsing visual items | FAQs and long detail |

## Build notes

- Mark up the rows as a <ul> with one <li> per item, so screen readers announce how many there are.
- When the whole row opens the item, make the title the link and stretch it over the row.
- Keep switches, menus and Follow buttons as their own controls, above the stretched link.
- Don't mark unread rows with color alone. Add a dot or a count and bold text, and put "unread" in the link's name.
- Make each row the full tap target, at least the 44 by 44 point control size Apple uses on iOS.
- Group long lists under short sticky headers, like dates or letters.

## FAQ

### What is the difference between a stacked list and a table?

A stacked list gives each item one row with a title and a line or two of detail, laid out freely. A table lines every value up under named columns so people can compare across items. Use a list when people read items one at a time, and a table when they compare fields.

### Should list rows have dividers?

Use thin dividers or clear spacing, not both. Dividers help dense lists like inboxes and settings. Spacing alone works when rows already have strong leading visuals, like avatars or thumbnails.

### How tall should a list row be?

Tall enough that the whole row is an easy tap. Apple's default control size on iOS is 44 by 44 points, so a one-line row should be at least that tall, and rows with a second line of text need more.

### How do you handle a very long list?

Add search above it, group rows under headers like dates or letters, and load more as people reach the end. For thousands of rows, render only the rows on screen so scrolling stays smooth.

## Related terms

- [Table](https://kombai.com/glossary/table/)
- [Card](https://kombai.com/glossary/card/)
- [Avatar](https://kombai.com/glossary/avatar/)
- [Search bar](https://kombai.com/glossary/search-bar/)

## References

- [Inclusive Components: Cards](https://inclusive-components.design/cards/)
- [WCAG 2.2: Understanding use of color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
- [Apple Human Interface Guidelines: Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)