Table of contents

The table of contents shows the sections on a long page of content in the basic page template. The component is triggered by an on/off field in CMS the content editor can control.

When Table of contents is turned on, the contents list will show a list of the H2s on the page. Each H2 will get an anchor icon that indicates it is one of the sections. The anchor icon should be clickable – sending that section to the top of the page and updating the URL in the URL bar.

Specs

• Padding: 24px

• Background: gray 5

• Border: 1px solid gray 10

• Border-radius: 4px

• Space between header and list: 8px

• Space between list items: 4px

• Header

  • font-size: base5 (all screen sizes)

  • line-height: base7(all screen sizes)

• Link

  • font-size: base3 (all screen sizes)

  • line-height: base5 (all screen sizes)

Text does not scale up/down in the standard formula outlined in the Typography section.

Inspect navigation components in public site components in Figma