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 component for building websites and applications. Using the components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language as well as accessible and consistent in behavior across applications.
The React components and technical documentation are available in Helsinki Design System React Storybook.View hds-react in GitHub
Since HDS is still in beta stage, the component libraries are still experimental. The existing components can be used in projects but changes may still occur even for stable components.
HDS uses a simple labeling system for components to communicate their completeness and susceptibility to changes:
|Pre-release||Component has been released/changed recently and 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 and fully featured. These components can be used in production. In the alpha stage we reserve a possibility to do breaking changes to stable components but this is unlikely!|
|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|