Data & Display
Components for displaying content, data grids, and typography.
Data & Display
Data and display components help you structure, present, and format information clearly. These include layout containers, data tables, typography, and supporting elements for user profiles and pagination.
Layout containers
Use Card as a versatile container for grouping related content—dashboards, product listings, or detailed views. Cards have a composable API with header, content, and footer sections, making them flexible for various layouts. Cards provide consistent padding, borders, and shadows, and they're ideal for creating scannable information hierarchies.
Data display
Use Table when displaying structured, tabular data (lists of users, transactions, reports). Tables use semantic HTML (<table>, <thead>, <tbody>) and are fully keyboard accessible. Pair with Pagination for navigating large datasets, showing page controls and allowing users to jump between sections.
Typography
Use Heading and Text for consistent typography styling. Headings create visual hierarchy and aid screen reader navigation. Text components handle body copy, captions, and secondary information with appropriate sizing and color.
Supporting elements
Use Avatar to display user profile images with automatic fallback initials when images aren't available. Avatars work well in cards, comments, team displays, and user lists.
Use Separator as a subtle visual divider between sections, groups of items, or content areas. Separators improve scanability without being visually heavy.
Components
| Component | Purpose | Context | Example |
|---|---|---|---|
| Card | Container for grouped content | Layouts, dashboards, product listings | Dashboard metrics, user profiles |
| Table | Structured data grid | Lists, reports, comparisons | Transaction history, user directory |
| Pagination | Navigate through pages | Large datasets | 100+ item lists, search results |
| Heading | Section titles with hierarchy | Page structure, visual hierarchy | Page titles, section headings |
| Text | Body copy and captions | All text content | Descriptions, metadata, labels |
| Avatar | User profile images | User displays, comments, lists | Team member photos, profile pictures |
| Separator | Visual divider | Content organization | Between sections, within lists |
Quick decision tree
- Displaying a group of related info (stats, article, user profile)? → Card
- Showing structured data rows and columns? → Table
- Navigating a large dataset? → Pagination
- Titles that structure the page hierarchy? → Heading
- Body text, descriptions, metadata? → Text
- User profile picture with fallback? → Avatar
- Visual separation between sections? → Separator