Learn 49 Data Display concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A semantic title that introduces a page or organizes content into a meaningful hierarchy.
Create a semantic heading hierarchy with one descriptive page title, correctly nested section headings, styles independent from heading level, useful anchor targets, and no skipped levels that confuse screen-reader navigation.Readable prose used for descriptions, instructions, articles, and supporting information.
Create readable body text with a comfortable line length, responsive type size and line height, semantic paragraphs and lists, sufficient contrast, and spacing that remains clear at 200 percent zoom.Long text shortened visually with an ellipsis while the complete value remains available.
Create single-line and multi-line text truncation that only activates when needed, preserves the complete accessible value, reveals the full text on focus or an explicit action, and never hides critical instructions or status.A short command, token, property, or code fragment shown within surrounding prose.
Create an inline code style using semantic code markup, legible monospace type, sufficient contrast, safe wrapping for long tokens, and copy behavior that preserves the exact characters.A preformatted multi-line source example with language context and optional copy action.
Create an accessible code block with a visible language label, semantic pre and code elements, preserved whitespace, horizontal overflow contained within the block, keyboard-accessible copy action, copied feedback, and readable syntax colors.A quotation set apart from surrounding content with its source or citation.
Create a semantic blockquote with concise quoted content, a clearly associated source using cite or figcaption, restrained visual emphasis, readable wrapping, and quotation marks that are not the only cue.A compact visual representation of a person, team, organization, or agent.
Create an avatar component supporting images, initials, and deterministic fallbacks; provide useful alternative text only when the identity is not already named nearby, preserve aspect ratio, and expose size and status variants.A compact overlapping or adjacent set of avatars representing several members.
Create an accessible avatar group with named member images, a visible overflow count, non-color status cues, stable overlap order, keyboard-accessible member details when interactive, and a readable list alternative.A compact visual indicator for a numeric tally, unread count, or short score.
Create an accessible count badge with a concise visible value, capped large counts such as 99+, an understandable accessible label, sufficient contrast, and live announcements only when the update is important.A prominent compact label communicating an object's meaningful state or priority.
Create status lozenges for active, pending, warning, and failed states with concise text, semantic colors plus icons or words, sufficient contrast, consistent meaning, and no misleading interactive styling.A compact label used to categorize or identify an object for recognition and discovery.
Create non-interactive and removable tag variants with concise text, clearly labelled remove buttons, wrapping and truncation rules, visible keyboard focus for actions, and a tag group that announces its purpose.A date or time value presented with enough context to understand when something occurred.
Create a timestamp using the semantic time element, a machine-readable datetime value, clear locale-aware display, explicit time-zone context when relevant, and full absolute date and time for ambiguous relative labels.A self-contained surface grouping related information and optional actions about one subject.
Create a responsive information card with one clear subject, semantic heading, optional media and metadata, correctly scoped actions, no nested interactive controls inside a stretched link, and content that remains usable without fixed height.Visual content delivered at an appropriate size and resolution for its display context.
Create a responsive image using intrinsic dimensions, srcset and sizes where useful, appropriate object-fit, lazy loading below the fold, meaningful alternative text or an empty alt for decoration, and reserved space to prevent layout shift.Self-contained media or illustration paired with a directly associated explanation or credit.
Create a semantic figure containing meaningful media and a concise figcaption that explains or credits it, avoid duplicating the image alternative text, maintain readable alignment, and keep the caption associated during responsive reflow.Names and corresponding values or descriptions represented with semantic term-value relationships.
Create a semantic description list using dl, dt, and dd for account metadata, align terms and values responsively, support multiple values per term, preserve meaningful source order, and display missing values consistently.A scannable series of key details, often with row-level actions for reviewing submitted information.
Create an accessible summary list for reviewing application details, with clear keys and values, optional row actions whose accessible names include the affected field, responsive stacking, and no table markup unless the data is genuinely tabular.A semantic ordered or unordered collection of related items.
Create semantic ordered and unordered list styles with visible markers, nested-level distinction, comfortable spacing, support for long wrapping content, and no removal of list semantics from assistive technologies.A lightweight row-based collection with consistently aligned fields but less density than a table.
Create a structured list for a small set of consistently shaped records, use semantic list or description-list markup, align labels and metadata without pretending it is a data table, and stack secondary fields cleanly on small screens.Events arranged along a chronological axis to communicate sequence and history.
Create an accessible vertical timeline with semantic ordered-list markup, machine-readable timestamps, clear event titles and descriptions, current-state indication beyond color, sensible reverse-chronological labeling, and a compact mobile treatment.A stream of recent actions showing who did what and when.
Create an activity feed with actor, action, object, and timestamp expressed as a readable sentence, grouped dates, useful avatar alternatives, pagination or load-more behavior, stable update announcements, and links whose purpose is clear out of context.Hierarchical information shown as expandable parent and child nodes.
Create an accessible tree view for hierarchical files only when full tree interaction is needed, implementing arrow-key traversal, Home and End, expand and collapse state, visible focus separate from selection, and accurate level and set metadata.Stacked disclosure sections that progressively reveal related content while conserving space.
Create an accessible accordion using heading-contained buttons with aria-expanded and aria-controls, independent panels unless single-open behavior is necessary, visible focus, preserved state, and content that remains available without animation.Structured row-and-column data designed for accurate scanning and comparison.
Create a semantic responsive data table with a visible caption, thead and tbody, th cells with correct scope, aligned numeric columns, a consistent missing-value convention, contained horizontal scrolling, and no table markup for page layout.A data table whose rows can be reordered by activating column-header controls.
Create a sortable semantic data table with real buttons inside sortable headers, one active aria-sort value, clear ascending and descending indicators beyond color, stable secondary ordering, keyboard operation, and an announced result summary.A table paired with search or filters that narrow the visible records.
Create a filterable data table with clearly labelled search and filter controls, explicit Apply and Clear behavior when appropriate, active-filter chips, result count and empty state, URL-shareable state, preserved table semantics, and debounced updates.A data table with row-selection controls for applying actions to one or more records.
Create a selectable data table with a labelled checkbox per row, an accurately mixed select-all control, selection count, keyboard-accessible bulk actions, preserved selection across pagination only when clearly stated, and no row click that conflicts with controls.Table rows that reveal additional detail while maintaining their tabular context.
Create a semantic table with labelled expand buttons per row, aria-expanded state, detail content associated with the correct record, preserved column alignment, sensible behavior when sorting or filtering, and a narrow-screen alternative.Related rows organized under meaningful group headings or subtotals.
Create a grouped data table with programmatically identified row groups, clear group labels and subtotals, repeated column context where needed, expansion only when useful, and sorting rules that do not separate records from their group.Features or attributes aligned across alternatives to support side-by-side evaluation.
Create a responsive comparison table with alternatives as clearly scoped headers, meaningful feature row headings, text alternatives for icons, highlighted recommendations that do not rely on color, a sticky context where safe, and a readable stacked mobile view.A table combining hierarchical expandable rows with aligned data columns.
Create an accessible tree table only for hierarchical records with comparable columns, using an appropriate treegrid interaction model, labelled expand controls, visible depth, accurate expanded and level state, keyboard navigation, and a simpler nested-list alternative where possible.Aggregated measures arranged against two or more categorical dimensions.
Create a pivot-style summary table with explicit row and column group headers, associated multi-level header markup, totals and subtotals, formatted measures, frozen context only when it remains accessible, and an export plus simpler summary option.A large collection that renders only the visible window of items for performance.
Create an accessible virtualized list for thousands of records with stable item keys and heights, accurate total and position metadata, keyboard focus that survives recycling, search and jump controls, loading and end states, and a non-virtualized fallback for assistive technology where needed.One prominent numeric value paired with a clear label, unit, and optional context.
Create a statistic component with an explicit label, locale-formatted value and unit, optional comparison period, meaningful trend text beyond arrows or color, stable loading width, and a machine-readable full value when display is abbreviated.A compact business metric combining current value, target, trend, and supporting context.
Create a KPI card with metric name, current value, unit, comparison period, target and trend expressed in text, optional sparkline, semantic grouping, consistent number formatting, and states for unavailable or stale data.A linear indicator showing completion toward a known total or an indeterminate wait.
Create a progress bar using the native progress element or correct progressbar semantics, a visible task label and percentage, accurate min and max values, indeterminate behavior when total is unknown, reduced-motion support, and completion feedback.A ring-shaped indicator showing a bounded completion value in compact space.
Create an accessible circular progress indicator with correct progressbar semantics, visible numeric value and task label, an SVG ring that does not carry meaning alone, clear complete and indeterminate states, and reduced-motion support.A scalar measurement within a known range, including low, optimum, and high regions.
Create a semantic meter for storage usage with min, max, low, high, optimum, and current values, a visible label and formatted value, non-color threshold cues, and no use for task progress.A dial-like display showing one value against meaningful qualitative ranges.
Create an accessible gauge for a single bounded measure with a clear title, numeric value and unit, labelled thresholds, non-color range distinctions, a concise text summary, and no decorative precision beyond what the data supports.A tiny context-rich chart showing a compact trend without full axes.
Create a sparkline paired with the metric it contextualizes, include accessible start, end, minimum, maximum, and trend text, avoid treating it as a precise standalone chart, and use stable scales when comparing multiple sparklines.Rectangular bars compare values across discrete categories using length on a common baseline.
Create an accessible bar chart for category comparison with a descriptive title, zero baseline, labelled axes and units, directly labelled values where practical, keyboard-reachable details, non-color series distinction, responsive labels, and an equivalent data table.Connected points reveal change and trends across an ordered dimension such as time.
Create an accessible time-series line chart with descriptive title, labelled time and value axes, units, markers or line styles beyond color, keyboard-accessible point details, clear missing-data treatment, responsive ticks, a concise trend summary, and a data-table alternative.A line chart with the region beneath the series filled to emphasize magnitude over time.
Create an accessible area chart for magnitude over time with labelled axes and units, a meaningful zero baseline, controlled opacity, distinguishable boundaries for multiple series, a text summary, keyboard-accessible details, and an equivalent data table.Circular slices show a small number of categories as proportions of one whole.
Create an accessible pie chart only for a few parts of one meaningful whole, order and directly label slices with category and percentage, distinguish them beyond color, include the total and an equivalent list or table, and use a bar chart when precise comparison matters.A ring divided into segments showing part-to-whole proportions with central summary space.
Create an accessible donut chart for a small part-to-whole dataset with total in the center, direct category and percentage labels, sufficient segment contrast beyond color, keyboard-accessible details, and an equivalent list or table.Points positioned by two numeric variables reveal correlation, clusters, and outliers.
Create an accessible scatter plot with descriptive x and y axis labels and units, distinguishable point groups using shape plus color, keyboard-accessible point details, highlighted outliers, an honest optional trend line, a relationship summary, and downloadable tabular data.Adjacent bins show the frequency distribution of continuous numeric values.
Create an accessible histogram with documented bin boundaries, adjacent bars, frequency or density axis label, sample size, meaningful summary of distribution and outliers, keyboard-accessible bin details, and the underlying values or frequency table.A matrix uses color intensity to reveal patterns across two categorical or ordered dimensions.
Create an accessible heat map with labelled rows and columns, a numeric legend, color scale with sufficient contrast and non-color values on focus, keyboard cell navigation, text summary of major patterns, and an equivalent data table.Nested rectangles encode hierarchical part-to-whole values through area and grouping.
Create an accessible treemap for hierarchical part-to-whole data with clearly labelled groups, direct values, stable color meaning, keyboard-accessible hierarchy and drill-down, breadcrumbs when zoomed, a hierarchy summary, and a sortable table alternative.