Design System / Patterns

Collection Rows

pattern

The list-row pattern behind every collection-like module: a vertical stack of tappable rows with a 36px leading tile (media thumb, avatar, filetype, or glyph), a primary label with an optional support line, and trailing meta (chevron, time, download arrow, lock, unread pill). One anatomy, many trailing states — the row IS the tap target.

Rules

01Leading tile is 36px on --module-surface-raised (media fills it via center/cover).
02Primary label: size 2 medium, truncating; support line: size 1 gray, truncating.
03Trailing glyphs paint gray-9; seed-scale accents (unread pills, presence) never remap.
04The whole row is one tap target; gated/disabled rows mute to ~55% opacity and go inert.
05Rows stack with small vertical padding — no separators; the surface does the grouping.

In practice

Media rows — CollectionThumb tile · label + support · chevron.
Collection
Tour TeeOwned · 2 variants
Vinyl — LimitedOwned
Presence rows — DirectoryAvatar tile + presence dot · snippet · time + unread pill (seed scale).
Members
File rows — File DownloadExtension tile · size/kind meta · download arrow, or lock when gated.
Downloads
Tap your tag to unlock

Used by

CollectionDirectoryGroup ChatsFile DownloadNotificationsSocial