UI UX Library – A collection of UI and UX elements and patterns

Auto-fill

Auto-fill enables fields to fill in previously used information again in standard form fields, such as name, adress and email adress.

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...

Badge

The notification element is called a badge, and is commonly round and in a colour which stands out from the surrounding elements to draw attention....

Buttons

Buttons indicates that an action will be performed when they are pushed. They consist of a container and are often labeled with a text, an...

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....

Captcha

A captcha is an image which is shown to the user. The user then has to write what they see in the image in a...

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...

Card

A card is a container for related information, usually showing different media in one card. Such as images, social icons, call to action and text....

Carousel

A carousel are a collection of images, which are often automatically rotated horizontally, hence the name. They images are usually hyperlinked, allowing the user to...

Checkbox

Checkboxes present a number of choices to the user, who can choose one or more options. They should be presented in a vertical list for...

Combobox

Allows the user to either make a choice to select from a predefined list, or enter their own text. A hybrid between a textfield and...

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...

Key

The legend or key allows the user to understand what they see in an interface, map or table. It can be an explanation of abbreviations...

Label

A label allows the user to understand a single element. It is often in the form of information, and can have an implied instruction. For...

Legend

The legend or key allows the user to understand what they see in an interface, map or table. It can be an explanation of abbreviations...

Link

A link is a control that the user can click and thereby be transported to somewhere else; within the page, within the whole webpage or...

Listbox

Allows the user to choose one or more options, which makes it the dropdown list equivalent of checkboxes. The user should be able to start...

Load more

Load more allows the user to scroll down on a feed or list. When they reach the end, they can press a “load more” button,...

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,...

Slider

See track bar.

Switches

Switches, also called Toggles, presents options to the user. These are commonly an on and an off option. Use when the change carries through immediately, like...

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...

Track bar

The slider, or the track bar, allows the user to change or set a value. This is commonly used for changing something in an interface, such...

Toggles

Toggles, also called switches, presents options to the user. These are commonly an on and an off option. Use when the change carries through immediately,...

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 –...

404 page

A 404 page is the page the user ends up on if the link they tried using leads to a page which does not exist...