The building blocks.

A vertical stack of interactive headings used to toggle the display of further information. Keeps the page clean without hiding important content.

A way of informing the user of important changes, errors, or warnings in a prominent way without completely interrupting their workflow.

A graphical representation of a user: usually a photo, illustration, or their initials. Often found in headers or comment sections.

A small label, generally appearing inside or in close proximity to another larger component, representing a status, property, or metadata.

A layout of modular, unequal-sized cards arranged in a grid. Perfect for showcasing features, services, or dashboards in a premium way.

A horizontal list of links showing the location of the current page in the site's navigational hierarchy, allowing quick upward movement.

Buttons trigger an action such as submitting a form or opening a dialog. They should look clickable and visually indicate their priority.

A wrapper for multiple, related buttons. Often used for toggling views or providing related actions in a compact space.

A contained block of content representing a single entity. Can include images, text, and actions. Used heavily in grids.

A means of displaying multiple slides of content, one or more at a time. Navigation is controlled via swiping or arrow buttons.

An input for choosing from predefined options. Used alone for a binary choice, or in a group to select multiple values.

A window that overlays the main page, dimming the background and requiring interaction before the user can return to the main context.

A thin horizontal or vertical line used to group content and visually separate different sections of a layout.

A contextual menu that appears upon interaction (click or hover), displaying a list of selectable actions or links.

The large, prominent banner at the top of a page. Usually contains a strong headline, a short subtext, and a primary CTA button.

A basic form control allowing the user to type in a single line of text data (like a name, email, or password).

The consistent top bar of a website containing the brand logo, primary navigational links, and sometimes user actions like search or login.

Controls that allow the user to navigate through a large set of content broken into separate pages.

A transient view that appears above other content, usually pointing to the element that triggered it. Great for rich tooltips or mini-forms.

A visual indicator showing the completion status of a task or process, usually displayed as a horizontal filled track.

An input for selecting exactly one option from a predefined list of mutually exclusive options.

A form control that allows the user to choose one value from a collapsed list of options that expands on click.

A placeholder representation of content before the actual data has loaded. Reduces perceived loading time by mapping out the layout.

An input control that lets the user select a value (or range of values) from a continuous scale by dragging a thumb along a track.

An animated, looping graphic (like a spinning circle) indicating that a background process is running.

A control that allows the user to immediately turn a specific setting on or off, functioning like a physical light switch.

A structured arrangement of data into rows and columns, used to display and compare datasets.

A navigational pattern allowing the user to switch between different views within the same context, saving vertical space.

A brief, non-blocking popup message providing feedback about an operation. Usually disappears automatically after a few seconds.

A small, contextual text box that appears when hovering or focusing on an element, providing supplementary information.

A means of inputting a date – often separated into multiple individual fields for day/month/year.

A visual way to choose a date using a calendar view.

A panel which slides out from the edge of the screen.

An indication to the user that there is no data to display in the current view; often includes an alternative action.

A wrapper for related form fields to group them visually and semantically.

An input which allows users to upload a file from their device.

Commonly appearing at the bottom of a page, used to display copyright, legal information, or secondary links.

A grouping of input controls that allow a user to submit information to a server.

A title or caption used to introduce a new section.

A graphic symbol designed to visually indicate the purpose of an interface element.

An element for embedding images.

A text label for form inputs.

A reference to a resource. This can be external or internal to the current document.

Used for grouping a collection of related items sequentially.

Used to display a quotation from a person or another source.

Lets users see and/or set a star rating for a product or other item.

Allows users to find content by entering a search term.

A hybrid between a button group, radio buttons, and tabs; used to switch between views.

Invisible links that become visible on keyboard focus for skipping to another section.

A wrapper component for adding a consistent margin between components.

A control for editing a numeric value with buttons for decrementing / incrementing.

A form control for editing multi-line text.

A component for displaying nested hierarchical information, such as a directory structure.

Video players are used for displaying video content, often including playback controls.