Title: Component Gallery

Accordion
Arrow toggle, Collapse, Collapsible sections, Collapsible, Details, Disclosure, Expandable, Expander, ShowyHideyThing
An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.

Alert
Notification, Feedback, Message, Banner, Callout
A way of informing the user of important changes in a prominent way.

Avatar
A graphical representation of a user: usually a photo, illustration, or initial.

Badge
Tag, Label, Chip
A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.

Breadcrumbs
Breadcrumb trail
A list of links showing the location of the current page in the navigational hierarchy.

Button
Buttons trigger an action such as submitting a form or showing/hiding an interface component.

Button group
Toolbar
A wrapper for multiple, related buttons.

Card
Tile
A container for content representing a single entity. e.g. a contact, article, or task.

Carousel
Content slider
A means of displaying multiple slides of content, one or more at a time. Navigation between slides can be controlled via swiping, scrolling, or buttons.

Checkbox
An input for choosing from predefined options:
- when used alone, it gives a binary choice (checked/unchecked);
- in a group it allows the user to select multiple values from a list of options.

Color picker
An input for choosing a color.

Combobox
Autocomplete, Autosuggest
An input that behaves similarly to a select, with the addition of a free text input to filter options.

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

Datepicker
Calendar, Datetime picker
A visual way to choose a date using a calendar view.

Drawer
Tray, Flyout, Sheet
A panel which slides out from the edge of the screen.

Dropdown menu
Select menu
A menu in which options are hidden by default but can be shown by interacting with a button; it differs from a select in that it shows actions or navigation options and is not a form input.

Empty state
An indication to the user that there is no data to display in the current view; it often includes an alternative action (e.g. try a different search term).

Fieldset
A wrapper for related form fields.

File
Attachment, Download
A representation of a file such as an uploaded attachment or a downloadable PDF.

File upload
File input, File uploader, Dropzone
An input which allows users to upload a file from their device.

Footer
Commonly appearing at the bottom of a page or section, a footer is used to display copyright and legal information or links to related content.

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

Header
An element that appears across the top of all pages on a website or application; it usually contains the site name and main navigation.

Heading
A title or caption used to introduce a new section.

Hero
Jumbotron, Banner
A large banner, usually appearing as one of the first items on a page; it often contains a full-width image.

Icon
An icon is a graphic symbol designed to visually indicate the purpose of an interface element.

Image
Picture
An element for embedding images.

Label
Form label
A text label for form inputs.

Link
Anchor, Hyperlink
A link is a reference to a resource. This can be external (e.g. a different web page) or internal (e.g. a specific element in the current document).

List
Lists are used for grouping a collection of related items. In HTML there are three types:
- unordered list — for items in no particular order.
- ordered list — for items in a specific order.
- description list — for key-value pairs.

Modal
Dialog, Popup, Modal window
A modal is an interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.

Navigation
Nav, Menu
A container for navigation links; these can be to other pages (e.g. main site navigation) or to elements within the current page (e.g. a table of contents).

Pagination
Pagination is the process of splitting information over multiple pages instead of showing it all on a single page; also the name for the interface component used for navigating between these pages.

Popover
An element that pops up from another element over other content; it differs from a tooltip in that it is usually triggered via click instead of hover and can contain interactive elements.

Progress bar
Progress
A horizontal bar indicating the current completion status of a long-running task, usually updated continuously as the task progresses, instead of in discrete steps.

Progress indicator
Progress tracker, Stepper, Steps, Timeline, Meter
A representation of a user’s progress through a series of discrete steps.

Quote
Pull quote, Block quote
Quotes are used to display a quotation: either from a person or another outside source or to highlight a passage of the current document (a pull quote).

Radio button
Radio, Radio group
Radio buttons allow a user to select a single option from a list of predefined options.

Rating
Ratings let users see and/or set a star rating for a product or other item.

Rich text editor
RTE, wysiwyg editor
An interface for editing “rich text” content (i.e. with formatting), usually through a WYSIWYG interface.

Search input
Search
Search inputs allow users to find content by entering a search term.

Segmented control
Toggle button group
A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.

Select
Dropdown, Select input
A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.

Separator
Divider, Horizonal rule, Vertical rule
A separator between two elements, usually consisting of a horizontal line.

Skeleton
Skeleton loader
A placeholder layout for content which hasn't yet loaded, usually built up of grey boxes.

Skip link
Links within a page for skipping to another section, primarily for users who navigate using a keyboard.

Slider
Range input
A form control for choosing a value within a preset range of values.

Spinner
Loader, Loading
A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.

Stack
A wrapper component for adding a consistent margin between components.

Stepper
Nudger, Quantity, Counter
A control for editing a numeric value with buttons for decrementing / incrementing.

Table
A component for displaying large amounts of data in rows and columns; commonly referred to as a 'Data Table' when it includes sorting and/ or filtering functionality.

Tabs
Tabbed interface
Tabbed interfaces are a way of navigating between multiple panels, reducing clutter and fitting more into a smaller space.

Text input
A form control that accepts a single line of text.

Textarea
Textbox, Text box
A form control for editing multi-line text.

Toast
Snackbar
A type of alert which appears in a layer above other content, visually similar to a mobile or desktop push notification.

Toggle
Switch, Lightswitch, Toggle button
A control used to switch between two states: often on or off.

Tooltip
Toggletip
A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.

Tree view
A component for displaying nested hierarchical information, such as a table of contents or directory structure.

Video
Video player
Video players are used for displaying video content; they often include controls to control playback.

Visually hidden
Screenreader only
Invisible text used to provide extra context for users of assistive technology.