This section lists all components currently available in HDS. Tokens and components are available in two separate npm packages, HDS Core and HDS React. Refer to the component table below to check which components are supported in each package.
The core package provides Helsinki City brand colours, typography, and base styles as CSS styles and variables. It also contains a collection of styles for components and icons that can be used in non-React applications.
The core components and technical documentation are available in Helsinki Design System Core Storybook.View hds-core in GitHub
Helsinki Design System React library provides a collection of React components for building websites and applications. Using these components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language. Components also promote accessible and consistent behavior across applications.
The React components and technical documentation are available in Helsinki Design System React Storybook.View hds-react in GitHub
HDS uses a simple labeling system for components to communicate their completeness and susceptibility to changes:
|Draft||Component is open for feedback. It was released/changed recently. We are monitoring if it needs fixes. Be cautious of using in production because breaking changes are still possible.|
|Stable||Component's implementation, design and documentation are stable. These components can be used in production. If breaking changes cannot be avoided, the major version number will be increased. The aim is to communicate these changes as early as possible. Enhancements are also possible without breaking changes.|
|Accessible||Component has been tested for accessibility by a 3rd party auditor.|
|New||Component has been released in or after the latest major release.|
|Updated||A breaking change has been introduced to this component in the latest major release.|
|Deprecated||Component will be removed in the upcoming major releases. Avoid using in production.|
For future components, see Roadmap.
|Koros (wave elements)||Stable|