Accordion
In UI design, an accordion is a type of menu that vertically stacks items that let the user expand and collapse the content. When a user clicks a label, that section expands to show extended content. One or more labels can be opened at a time, which helps users navigate large amounts of information quickly.
Breadcrumb
A breadcrumb is a navigation system that shows where a user is currently situated within a website. Usually located at the top of a page, breadcrumbs let users see their current location and the steps they took to get there. As these are clickable links, users can move back to read or edit any information they filled in. For example, if you’re browsing the ASOS clothing website, you might see a trail of links that shows where you are (and how you got there) as follows: Home > Men > Sportswear > Shoes
Call-to-action/CTA
A call-to-action button – or a CTA – encourages users to take a specific action on a website or application. For example: Sign Up, Book Now, Subscribe. CTA buttons exist as a conversion goal, encouraging users to buy, consume or register for a product or service.
Card
Cards group related content side-by-side so that users don’t have to scroll through a list to find the information they are looking for. Square or rectangular-shaped, they have the appearance of a business card and they can include buttons, text and images.
Components
Components are the building blocks of a design system. They can be small (e.g., buttons, icons) or large (e.g., navigation systems, carousels). A core aspect of components is that they’re designed to be as simple yet as flexible as possible so that they can be used in multiple instances.
Controls/Input controls
Input controls are the interactive elements used on any interface. These include checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, plus/minus icons for changing number values, text fields, and date fields.
Input field
Input fields are simple places where users can enter content into a system. Forms are the most common example, but a search bar is an example of an input field that we use on an hourly basis.
Margin
The areas sitting left and right of a grid
Meatball menu
The meatball menu is a set of three horizontal dots. When the user clicks on the dots, more options are revealed.
Modal
Message boxes are also known as modal windows and they work in the same way.
Patterns
Patterns are recurring solutions to common problems. They can be used to solve design challenges in a variety of ways, from layout to interaction. Within most design projects, patterns will be used to help with the structure and flow of the product.
Primary and secondary button
If there are multiple CTAs on a screen, the primary button lets us know which action is the most important. The secondary button is still an important CTA, but it is less important than the primary button. It should be less visually dominant and should not clash with the image or appearance of the primary.
Slider controls
A slider allows users to set or change a value. A very common example of this is when you are searching for holiday accommodation, you can set your price range. Another example is changing the brightness levels on the screen of your phone.
Snackbar
A non-modal, unobtrusive element to display a short message that appears on the screen when an event occurs and usually automatically disappears. It is used to provide feedback or show a message.
Tooltip
When a user hovers over a certain item, a tooltip appears to explain it further. For example, when asked for your CVV number on an online shop, a tooltip usually tells you where to find the CVV number on your credit or debit card.
Toggle
Toggle buttons act like an on-and-off switch, allowing users to change a setting between two states. For example, a toggle switch can be used on your phone’s settings to switch Wi-Fi or Bluetooth connections on or off.