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.

circle-info

Inspect navigation components in public site components in Figma

Last updated