Skip to content
UI Kit
Accent color

Lists, trees and timelines

Description lists for details, sortable lists to drag, tree views for folders and timelines for events in order.

4 components · 17 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

description-list

Description list

Terms and values as a real dl, in stacked rows, two columns, a hairline grid, an inline meta line or a spec sheet with groups. Values copy, link and carry a status.

Props and details · Description list

Stacked

Term above value, for narrow side panels like an order summary. A status dot, a second line, a copy button that turns into a check and a link to the invoice.

Open in Studio

Two columns

Term left, value right on hairlines, one column on phones. For profile and settings pages, long lists fold behind Show all.

Open in Studio

Grid

Key facts as tiles on a hairline grid, with icon and a quiet second line. Fits listings, case studies and product pages, the tiles rise in as they scroll into view.

Open in Studio

Inline meta

The line of facts under a page heading, divided by hairlines. On phones it becomes a two column grid, the invoice number copies with one tap.

Open in Studio

Spec sheet

Grouped specs with soft zebra rows for product pages. The first rows are shown, Show all unfolds the rest, and new rows fade in.

Open in Studio

sortable-list

Sortable list

Put things in order by dragging, by keyboard or with buttons. The others glide out of the way, every move is announced to screen readers.

Props and details · Sortable list

List

Rows with a grip. Drag it, or press Space, move with the arrows and drop with Space, Escape puts it back. A small note confirms each new order.

Open in Studio

Ranking

Ranked cards for surveys and priorities. The numbers roll to their new place, up and down buttons sit next to the grip for anyone who prefers to click.

Open in Studio

Photo grid

Pictures as tiles, the first one is the cover. Drag a tile by its grip, or move it with the arrows in all four directions.

Open in Studio

Two columns

Move items between two lists by drag, by the arrow button on each row, or by keyboard with left and right. Counts follow, an empty list shows where to drop.

Open in Studio

timeline

Timeline

Events in order: activity feeds, histories, order tracking and changelogs.

Props and details · Timeline

Activity

Icons on a line, times on the right, previews under events.

History

A center line with milestones on both sides, images in between.

Tracking

Horizontal steps with done, current and upcoming states.

Changelog

Small markers, dates in a column, versions as badges.

tree-view

Tree view

Nested lists that open and close, as files with change marks, a docs navigation, permissions with mixed checkboxes or an outline with guide lines. Full keyboard support after the tree pattern.

Props and details · Tree view

Files

Folders open with a soft height, files carry size and a change mark (added, modified, deleted). The path and the drawn file follow the selection, arrows and letters move through the tree.

Open in Studio

Navigation

A docs sidebar. Sections open, pages are links, the current page carries a bar on the guide line and aria-current. The article beside it changes with a soft blur.

Open in Studio

Checkboxes

Permissions of a role. A branch checks all its children, a partly checked branch shows a dash, locked rights stay visible. Open all and close all sit above, a counter follows.

Open in Studio

Outline

Guide lines connect each level, counts sit at the end. Choosing a team updates the card beside it, which stays in view while the outline scrolls.

Open in Studio

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Lists, trees and timelines on a page.

Often searched

Jump to

Copied to the clipboard