


Back to top
The back to top function is a function allowing the user to go to the top of a page by a single click, instead of...



Breadcrumbs
Breadcrumbs allow users to identify where they are in the system, and see the navigation path to that position. The path consists of clickable links....


Call to action
Call to actions or CTAs are a specific type of button which encourages the user to take a specific step. This is usually to buy...





Conditional logic
Conditional logic are questions shown to the user to sort out information which is not useful for the user to see. Used at an early...

Date and time pickers
Date and time pickers allow the user to choose from a defined set of times and dates, commonly from a list or calendar. This is...

Dropdown list
Allow users to select one item from a predefined list. The list is expanded when the user clicks on them, essentially making it a compacted...

Field placeholder
Field placeholders show the user how a field should be filled out; either what content is expected or to what format. Field placeholders should be...

Ghost button
Ghost buttons are buttons which are made to meld into the background. They consist of a border and a text, but the button does not...

Image grid
Image grids are collections of images sorted into a grid. Each image is usually clickable leading to more information or a larger version of the...

Infinite scroll
Infinite scrolls allows the user to scroll down on a feed or list, loading in more examples automatically as they scroll down. Instead of navigating...







Map pin, pushpin
This symbol is called the map pin, or the pushpin, and is used to mark something on a map. Usually a location or point of...

Multi-page, multi-step form
A multi-page consists of one or more pages. Each page contains a set of controls and can have their own layout. A common example is...

Notification
The notification alerts the user that there is something new for the user to adress or see. This might be warnings, alerts, and errors, or...

Predictive search
A predictive search is when alternative endings to what the user has started typing appear as options that the user can search. The system predicts...

Radio buttons
Radio buttons present a number of choices to the user, who can choose one of the options. They should be presented in a vertical list...

Search field
A search field allows the user to search for content on a specific page, or on an entire webpage. The search field can in itself...

Sign-posting
Sign posts show users what step they are on, and how many steps there are in total. This is useful in multi-step forms to give the...

Slice fields
Slice fields are a field divided up into several sections. Commonly the pointer is auto-advanced to the next field when the first is filled in,...



Text field
Text fields allow users to enter text. The types of text might be free or predefined to a certain format. The number of digits might...



Zero state
Zero state is when something is not filled in. The zero state needs to be designed to help the user to fill it in –...