Back to all components

Page Table of Contents

The Page Table of Contents component provides users with a section that highlights anchor links to various sections of the current page.

It's especially useful for long documentation pages or articles.

Key Features

Anchor Linked: Automatically links to sections that use the Page Table of Contents Header
Customisable Styles: Easy to match with your brand or layout.

Examples

On a documentation page to let users jump between topics
In a technical blog post that explains complex concepts with multiple headers.
On a product comparison page where each product section is detailed and long.
For FAQs or support pages where users can click to jump to their relevant question/answer.

Page Table of Contents Header

The Page Table of Contents Header component adds a simple, descriptive label to your page, which automatically flows through to the Table of Contents component using anchor links.

It's especially useful for long documentation pages or articles to help separate and present content.

Key Features

Clear Labelling: Tells users what the section below represents.
Customisable Heading Level: Use the different header styles based on your page structure

Examples

On a documentation page to let users jump between topics
In a technical blog post that explains complex concepts with multiple headers.
On a product comparison page where each product section is detailed and long.
For FAQs or support pages where users can click to jump to their relevant question/answer

Table of Contents Example

Steps to add a Table of Contents

Example Page Table of Contents Header

Example Text

This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components.This is an example article to demonstrate the table of contents components.

This is an example article to demonstrate the table of contents components.

This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components

Second Example Header

Example Text

This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components.This is an example article to demonstrate the table of contents components.

This is an example article to demonstrate the table of contents components.

This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components. This is an example article to demonstrate the table of contents components

Steps to add a Table of Contents

1. When editing your webpage, add a new web component and select Page Table of Contents Header. Enter your header description and the label you'd like to show in the Table of Contents

2. Position on your webpage

3. Repeat the process with all of your required headers and content

4. Now add the Page Table of Contents web component which will automatically list each of the headers you have just created.

You now have a customisable table of contents which will dynamically update as you add or remove headers

A link component is an essential element in web development that allows users to navigate between pages, sections, or external resources. Email and Phone Links - Creating clickable links for email and phone numbers. This link directs you back to the...