Design reference index · 3/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Bottom Navigation
Primary navigation destinations displayed at the bottom of a mobile screen.
Tab Bar
An interface for switching among related destinations or views using tabs.
Tabs
A control for switching between content panels in the same context.
Navigation Rail
A narrow vertical navigation area suited to medium-width screens.
Navigation Drawer
A collapsible or expandable side navigation menu.
Sidebar
A persistent side area containing navigation, tools, or information.
Breadcrumb
A path showing the hierarchy from a parent page to the current location.
Pagination
Navigation that divides a list into numbered pages.
Infinite Scroll
A pattern that automatically appends more content as the user scrolls.
Load More
A pattern that adds content only when the user activates an explicit button.
Anchor Navigation
Navigation to a specific heading or section on the same page.
Table of Contents (TOC)
A list of a long document's sections with direct navigation links.
Mega Menu
A wide navigation panel organizing destinations across multiple levels.
Hamburger Menu
A primary menu concealed behind a three-line icon.
Overflow Menu
A menu containing actions omitted from the main interface because of limited space.
Tree View
An expandable and collapsible hierarchy, such as folders or an organization chart.
Accordion Navigation
A navigation menu with collapsible categories.
Page Header
An upper area containing the screen title, explanatory text, and primary actions.
Back Navigation
An action returning to the previous screen or navigation context.
Deep Link
An address that opens a specific application screen or state directly.
Card
A container grouping content and actions around a single subject or item.
Tile
A self-contained grid area displaying content or a metric.
Panel
An area grouping related information or controls.
Section
A subdivision organizing information and interface elements under one topic.
Container
A structural unit that constrains content width and layout.
Grid Layout
A layout that aligns elements using rows and columns.
Column Layout
A layout that arranges content in vertical columns.
Masonry Layout
A tightly packed, brick-like layout for items of different heights.
Stack Layout
A layout that stacks elements vertically or horizontally with consistent spacing.
Split View
A view dividing the screen into two or more simultaneously visible areas.
Master-detail View
A view displaying a list alongside details of the selected item.
Resizable Panel
A panel whose width or height can be changed by moving its boundary.
Divider / Separator
A visual boundary separating content or groups of controls.
Spacer
An element maintaining empty space between components.
Accordion
A component that expands or collapses content when its heading is activated.
Disclosure
A control revealing additional information or nested content when needed.
Carousel
A display that cycles through items horizontally or automatically.
Horizontal Scroller
An interface for browsing cards or media along a horizontal axis.
Sticky Header
A header that remains at the top of the screen during scrolling.
Sticky Section
A pattern in which a section becomes fixed at a particular scroll position.
Footer
The bottom area containing supplementary navigation, policies, or information.
Avatar
An image or initials representing a person, team, or agent.
Avatar Group
Multiple profile representations displayed side by side or overlapping.
Thumbnail
A small preview image representing the original media.
Image Gallery
A collection of images presented as one browsable group.
Image Viewer
An interface for viewing images with zoom, pan, or rotation controls.
Video Player
A media interface offering playback, pause, and seeking controls.
Audio Player
An audio interface for controlling playback position and volume.
Media Controls
A shared set of controls for playback, seeking, and audio.
Caption / Subtitle
On-screen text presenting speech or descriptive information from media.
Transcript
A chronological text representation of audio or video content.
Content Preview
A view of the essential content of a file, document, or media item before opening it.
Read More / Truncation
A pattern showing part of long content with an option to expand it.
Ellipsis
Truncating overflowing text with an ellipsis character.
Rich Content Card
A card combining a title, image, description, and actions.
Media Object
A repeated layout pattern placing text next to an image.
Hero Section
A large introductory page area emphasizing the key value, imagery, and primary action.
Timeline
Events or history displayed chronologically along a line or in a list.
Activity Feed
A continuous list of recent user or system activity.
Data Table
Presents readable values in rows and columns.
Data Grid
A cell-oriented table supporting richer selection, editing and sorting.
Treegrid
Combines expandable hierarchical rows with tabular columns.
Sortable Column
A header control that sorts rows by column values.
Resizable Column
Changes column width using a draggable header boundary.
Sticky Column
Keeps a column visible while the table scrolls horizontally.
Frozen Header
Keeps column headings visible during vertical scrolling.
Row Selection
Selects rows for inspection or bulk operations.
Inline Editing
Edits a cell or item without opening a separate page.
Bulk Actions
Applies one operation to multiple selected rows.
KPI Card
Summarizes a key metric with its target or comparison context.
Stat Card
Displays one statistical value and its unit.
Sparkline
A compact trend line embedded next to a value or in a table.
Line Chart
Connects ordered observations to reveal trends.
Bar Chart
Compares categorical values using bar lengths measured from a common baseline.
Stacked Bar Chart
Stacks segments to show category totals and their composition.
Area Chart
Fills the region under a line to emphasize change and magnitude.
Pie Chart
Shows parts of a whole through sector angles.
Donut Chart
Shows composition as sectors around a hollow center.
Scatter Plot
Encodes two numerical variables as horizontal and vertical positions.
Heatmap
Encodes values in a two-dimensional matrix using color intensity.