Content table

Angular

See content

Table of Content is a secondary way of navigation for the user. It allows them to find the content in a page or article more quickly with anchor links in the content.

Usage

It gives users an overview of the article or page contents and organization and what they are getting from your content. If you provide a clickable ToC, it allows readers to go directly to a specific section of your content. It can help to improve the search ranking of your website or article.

When to use

Use a Table of Content when you have a large content on an article or page or even if you want to prioritize your content.

Anatomy

  1. Section title activated: A title that indicate the section that you are currently reading or that you are seeing on screen while scrolling.

  2. Section title hovered: A state that indicate the title that you are currently hovering with your mouse and indicate that you can folow the link.

  3. Section title: These titles indicate the topic of each section of your content on this page or article.

Types

The type should be consistent with your product.

Location based

It is based on the page or article hierarchy. It shows to the user where he is located on this hierarchy and what he can find in it.

Path based

It follows the reading and scrolling of the user during his navigation inside the page or article.

Headline tag based

It is based on the H2 headline tag that you put in your page or article and dynamically put them in the Table of Content as an anchor link.

Placement

The table of content is usually based on the top right of your page follow the user during his navigation within the content. But it can also be placed on the left of the page.

Do’s & Don’ts

Do

It is important to highlight the active section by puting the item with a different font weight. You also need to highlight the item when the user will over it.

Don’t

Don’t put all the item with the same font weight.

Do

Put a limited number of items in your ToC, there is no need to put the entire structure of you page.

Don’t

No need to have all of the heading’s levels in your table of content.

Do

Be consistent in the lenght of your heading.

Don’t

Don’t put to long heading. A heading that is to long will impact the consistency of your Table of Content.

Do

If you have to put an external link, it is important that le link will open in a new tab and it is important to specify it to the user (for example with an icon). Remember that is normally something to avoid in a Table of Content.

Don’t

Don’t put to much external link don’t forget to specify to the user.

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.