Data Display Patterns (Tables, Lists, Cards)

Data display patterns are reusable structures for presenting collections of information in a Design System — tables for dense, tabular data; lists for linear sequences; cards for grouped, discrete items.

Tables handle structured, comparable data. Columns represent attributes, rows represent items. Tables excel at letting users scan, sort, filter, and compare. They're the most information-dense pattern. In a Design System, a Table component usually exposes column configuration, sorting, pagination, and selection. The discipline: don't force tabular data into a table just because it's tabular. If users don't need to compare across columns, a list or cards might be better.

Lists present sequences where order or grouping matters — navigation, steps in a process, filtered results. Lists are simpler than tables (usually one visual hierarchy) but more scannable than prose. A Design System often provides ListItem as a reusable unit that can stand alone or combine with List, enabling the composite pattern.

Cards chunk information into discrete, self-contained units. Each card is independent — you can rearrange, remove, or open one without affecting others. Cards work well for browse experiences (products, articles, team members). A Design System card usually includes slots for image, title, description, and actions, making it flexible across use cases.

The choice between them is task-dependent. Users comparing prices across products need a table. Users browsing products can use cards. Users following a checklist need a list. A mature Design System documents all three with clear guidance on when to use each and provides variants for common needs: sortable tables, paginated lists, expandable cards.

Related: Component · Component library · Composability · Component documentation