Overview

Multiple or single tags can be used to categorize items.

Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

Edit this section, Opens in new window

Variations

Type Purpose
Category tags Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items.
Filter tags Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed.
Input tags Input tags represent keywords in input field. Input tags can be removed.
Status tags Status tags represent status of item. Status tags use semantic colors to communicate status of item.
Edit this section, Opens in new window

Usage

Sizing

Tags is available in two different sizes; normal and small:

Orwell
Orwell
Edit this section, Opens in new window

Category tags

Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items.

  • Corporate
  • Baltic
  • Private
  • IT

Usage

Use category tags when content is mapped to multiple categories, and the user needs a way to differentiate between them. Colored variation of category tags can be used to bring more attention to them.

A category tag can be in a list.

A category tag can also be a standalone element.

Behaviours

List of category tags should be arranged horizontally. When horizontal space is limited in a tag group, the individual tags wrap to form another line. Category tags can act as a links to filtered lists of items tagged with them.

The category tag has special behaviours. However, it can be a link. See next section for documentation.

Interactions

A category tag can be interactive, i.e. a link:

Hover
Style
  1. The outline color is BL 1 DARK, DARK BLUE
  2. The text color is BL 1 DARK, DARK BLUE
Focus
Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Active
Style
  1. The outline color is BL 1 DARK, DARK BLUE
  2. The text color is BL 1 DARK, DARK BLUE

Modifiers

Colors

A category tag can have different fills:

Style
  1. The fill color is CY 3, LIGHT YELLOW
  2. The fill color is CG 3, LIGHT GREEN
  3. The fill color is CR 3, LIGHT RED
  4. The fill color is CB 3, LIGHT BLUE

The background colors used is blended with mix-blend-mode: multiply; and opacity: 0.5;

Passive
Style
  1. The outline color is LB 1, LIGHT BROWN
  2. The text color is LB 1, LIGHT BROWN

Only links can be `.passive`

Edit this section, Opens in new window

Filter tags

Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed.

Usage

A filter tag is a tag that is put together with other filter tags inside a filter container. It is NOT part of several tags in a list.

A filter tag can be together with other filter tags, inside a context

Anatomy

Style
  1. The fill color is transparent, the outline color is LB 1, LIGHT BROWN 20%
  2. The text color is LB 1, LIGHT BROWN
  3. The icon fill color is LB 1, LIGHT BROWN
  4. The icon stroke color is BE 5, LIGHTEST BEIGE

Behaviours

Interactions

Hover

A filter tag can be hovered

Style
  1. The text, outline and icon fill color is BL 1, BLUE
Focus

A filter tag can be focused

Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Click

A filter tag can be removed.

When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.

<button class="if tag animation-fade-out" type="button">Orwell</button>
Edit this section, Opens in new window

Input tags

Input tags represent keywords in input field. Input tags can be removed.

Usage

Use input tags when multiple input values are expected from user. Input values can be suggested by system.

A input tag can be together with other input tags, inside a context

Anatomy

Style
  1. The fill color is LB, LIGHT BROWN
  2. The text color is BR 1, BROWN
  3. The icon fill color is BR 1, BROWN
  4. The icon stroke color is BE 5, LIGHTEST BEIGE

Behaviours

Interactions

Hover

A input tag can be hovered

Style
  1. The icon fill color is BR 1, BROWN
  2. The icon stroke color is BE 5, LIGHTEST BEIGE
Focus

A input tag can be focused

Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Click

A input tag can be removed.

When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.

<button class="if tag input animation-fade-out" type="button">Orwell</button>
Edit this section, Opens in new window

Status tags

Status tags represent status of item. Status tags use semantic colors to communicate status of item.

Error Success Warning

Usage

A status tag is a tag that is put by itself in another context, for example to label the status of an invoice etc. You should not wrap it in a list, since it is only natural to have one occurence of this tag.

  • Error
  • Success

Do not put status tags in a list

Error

Place a status tag as a standalone element in the context.

Edit this section, Opens in new window
Contact us, Opens in new window