Components overview
This section lists all components currently available in HDS.
Components can be viewed also in the Storybook examples.
![](/images/components/overview/accordion@2x.png)
Accordion
Accordions can be used to hide and reveal information.
![](/images/components/overview/breadcrumbs@2x.png)
Breadcrumb
Breadcrumb provides links back to each previous page and shows the user's current location on a website.
![](/images/components/overview/button@2x.png)
Button
Buttons are meant to make actions easily visible and understandable to the user.
![](/images/components/overview/card@2x.png)
Card
Cards can be used to divide and organise interface content.
![](/images/components/overview/checkbox@2x.png)
Checkbox
Checkboxes are used to select from one of more options.
![](/images/components/overview/cookieconsent@2x.png)
CookieConsent
The cookie compliance components informs users about cookie usage.
![](/images/components/overview/dateinput@2x.png)
DateInput
Date input allows the user to easily input a specific date or a date range.
![](/images/components/overview/dialog@2x.png)
Dialog
Dialogs initiate a conversation between the service and the user.
![](/images/components/overview/dropdown@2x.png)
Dropdown
A dropdown offers a user a list of options, of which one or multiple can be selected.
![](/images/components/overview/errorsummary@2x.png)
ErrorSummary
Error summary is a notification-like element which lists all errors in a form or other inputs.
![](/images/components/overview/fieldset@2x.png)
Fieldset
Fieldset groups multiple related form input fields together.
![](/images/components/overview/fileinput@2x.png)
FileInput
A file input helps to browse and select files to be uploaded to the service.
![](/images/components/overview/footer@2x.png)
Footer
The footer is located at the bottom of the page below the main body content.
![](/images/components/overview/header@2x.png)
Header
Header is a wrapper component for all navigation elements.
![](/images/components/overview/hero@2x.png)
Hero
Hero is used below the main navigation as the first content element.
![](/images/components/overview/highlight@2x.png)
Highlight
Quote and highlight allow lifting an excerpt from a longer text to emphasize.
![](/images/components/overview/icon@2x.png)
Icon
Icons are used for providing visual cues and highlighting actions.
![](/images/components/overview/koros@2x.png)
Koros
Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki.
![](/images/components/overview/link@2x.png)
Link
Links are used as navigational elements and can be standalone or inline.
![](/images/components/overview/linkbox@2x.png)
Linkbox
Linkboxes are used to combine elements into a single interactable element.
![](/images/components/overview/loadingspinner@2x.png)
LoadingSpinner
Loading spinner is used for notifying users that their action is being processed.
![](/images/components/overview/headerlogin@2x.jpg)
Login
Login related hooks and modules
![](/images/components/overview/logo@2x.png)
Logo
The logo is used to identify the service as an official City of Helsinki service.
![](/images/components/overview/notification@2x.png)
Notification
Notifications are used to present timely information to the user.
![](/images/components/overview/numberinput@2x.png)
NumberInput
A number input allows the user to enter numeric values.
![](/images/components/overview/pagination@2x.png)
Pagination
The pagination component allows the user to navigate between pages.
![](/images/components/overview/passwordinput@2x.png)
PasswordInput
A password field is an input field component that is used to input password data.
![](/images/components/overview/phoneinput@2x.png)
PhoneInput
A phone input allows the user to enter phone number values.
![](/images/components/overview/radiobutton@2x.png)
RadioButton
Radio buttons are used to pick an option when only one option can be chosen.
![](/images/components/overview/searchinput@2x.png)
SearchInput
A search input allows the user to find relevant content.
![](/images/components/overview/selectiongroup@2x.png)
SelectionGroup
Selection group allows grouping form selection elements to each other.
![](/images/components/overview/sidenavigation@2x.png)
SideNavigation
A side navigation is an additional navigation located on the left of the viewport.
![](/images/components/overview/statuslabel@2x.png)
StatusLabel
Status labels can be used to highlight different statuses or items to the user.
![](/images/components/overview/stepbystep@2x.png)
StepByStep
StepByStep component is useful for visualising a process in steps.
![](/images/components/overview/stepper@2x.png)
Stepper
The stepper helps to see the progression and to navigate between form steps.
![](/images/components/overview/table@2x.png)
Table
Tables are used to present tabulated data to the user in a consistent manner.
![](/images/components/overview/tabs@2x.png)
Tabs
Tabs are used to navigate between contents that have a relation.
![](/images/components/overview/tag@2x.png)
Tag
Tags are used to show attributes of an object or element such as categories.
![](/images/components/overview/textarea@2x.png)
TextArea
A text area is an input used for multiline answers.
![](/images/components/overview/textinput@2x.png)
TextInput
A text field is an input field that the user can use to input content and data.
![](/images/components/overview/timeinput@2x.png)
TimeInput
A time input helps the user select a specific time.
![](/images/components/overview/togglebutton@2x.png)
ToggleButton
Toggle button allows to switch between two states such as "On" and "Off".
![](/images/components/overview/tooltip@2x.png)
Tooltip
Tooltips are used to present context or background information to the user.