Components overview

Accordions can be used to hide and reveal information.

Breadcrumb provides links back to each previous page and shows the user's current location on a website.

Buttons are meant to make actions easily visible and understandable to the user.

Cards can be used to divide and organise interface content.

Checkboxes are used to select from one of more options.

The cookie compliance components informs users about cookie usage.

Date input allows the user to easily input a specific date or a date range.

Dialogs initiate a conversation between the service and the user.

A dropdown offers a user a list of options, of which one or multiple can be selected.

Error summary is a notification-like element which lists all errors in a form or other inputs.

Fieldset groups multiple related form input fields together.

A file input helps to browse and select files to be uploaded to the service.

The footer is located at the bottom of the page below the main body content.

Header is a wrapper component for all navigation elements.

Hero is used below the main navigation as the first content element.

Quote and highlight allow lifting an excerpt from a longer text to emphasize.

Icons are used for providing visual cues and highlighting actions.

Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki.

Links are used as navigational elements and can be standalone or inline.

Linkboxes are used to combine elements into a single interactable element.

Loading spinner is used for notifying users that their action is being processed.

Login related hooks and modules

The logo is used to identify the service as an official City of Helsinki service.

Notifications are used to present timely information to the user.

A number input allows the user to enter numeric values.

The pagination component allows the user to navigate between pages.

A password field is an input field component that is used to input password data.

A phone input allows the user to enter phone number values.

Radio buttons are used to pick an option when only one option can be chosen.

A search input allows the user to find relevant content.

Select offers a user a list of options, of which one or multiple can be selected.

Selection group allows grouping form selection elements to each other.

A side navigation is an additional navigation located on the left of the viewport.

Status labels can be used to highlight different statuses or items to the user.

StepByStep component is useful for visualising a process in steps.

The stepper helps to see the progression and to navigate between form steps.

Tables are used to present tabulated data to the user in a consistent manner.

Tabs are used to navigate between contents that have a relation.

Tags are used to show attributes of an object or element such as categories.

A text area is an input used for multiline answers.

A text field is an input field that the user can use to input content and data.

A time input helps the user select a specific time.

Toggle button allows to switch between two states such as "On" and "Off".

Tooltips are used to present context or background information to the user.