Logo

Usage

Example

The logo is used to identify the site or application. See the logo visual asset documentation for more information about principles of using the City of Helsinki logo.

Principles

• Logo should be used in HDS Header and HDS Footer components. Use the Logo component sparingly in other parts of the service.
• You should include the service name next to the logo. This helps the user more easily identify which city service they are currently using.
• The Logo component does not include translations itself but localization can be achieved by changing the logo src accordingly.
• The src is user-replaceable. If Helsinki logo is not used, only Logo component is needed to be imported and the src given as url, data-url or locally imported image.
• The Logo component should act as a link to the main page of the service.
• Unless the Logo is hidden from the screen-readers by giving it the aria-hidden property, it should be given an alt attribute as a description.

Variations

Default

The Helsinki logo included is offered in three (3) languages and their dark-mode variants (light-coloured to be visible on top of dark background).

Sizes

The component includes three (3) size variants to fit the context. If omitted, the logo uses all available space.