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.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your 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 have never accessed the Design System, you can request access via this link.