Tag

Angular

See content

Blazor

See content

Use tags to label, categorize, or organize items using keywords that describe them.

Usage

When to use

Use tag to help the user to differentiate different items, add some short description and help the user searching information filtering with tags. Tag can be generated by the user when he adds content to the website.

Anatomy

  1. Label: Short description with maximum two words

Label

The user can click on it to sort all items with the same tag.

Placement

Place multiple tags on row. You can place them under the header of the content, or at the end of the content.

Do’s & Don’ts

Do

Use tags with moderation on a page and /or item and use a function to open all tags if there are too many.

Don’t

Do not put too much labels on the same item/page.

Do

Use one color on the displayed tags. Only use several colors if there is a meaning for the user.

Don’t

Do not use various colors applied on the tags. Only use several colors if there is a meaning for the user, like for instance a status.

Do

Use the colors of the design system.

Don’t

Do not use colors in addition to those proposed in the design system.

Do

Use tags with clear and concise keywords and related to the topic of the page.

Don’t

Do not put tags with too long texts.

Sign in

I have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A Michelin ID (e.g. F012345)
  • A double authentification (with ForgeRock application or SMS)
  • A password associated to a Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you never logged into the Design System, you can submit an access request using this link: Request an access