Tutorial

Learn all about how to use Table of Contents here!

How does it work?!

Table of Contents is a super easy stack to use!

There are two stacks included, the main Table Of Contents stack, and the Table Of Contents Article stack.

The main stack will take care of all the magic for you, and can be used to configure all of the styles and layout options.

The included Article stack, is what you can use to add all of your content.

All you have to do is drag the main stack onto the page, and then add Article sections using the ( + ) plus button.

After adding an Article to your table of contents, you will see a header title area, which you can use to set the title for the particular artice section.

The title that you add to the top of the article, will automagically be taken and placed inside of the table of contents at the top of the stack.

Then all you have to do is drag your content into the " drop stacks here " section, and you are all set!!

General Settings

Max-Width

The max-width option will set the maximum width for the main table of contents, the content itself, and the progress indicators for the stack

Z-index

The Z-index option is an advanced option, and can be used if Table Of Contents is being hidden behind other fixed stacks on the page.

Offset-Top

This is the distance from the top of the page that the Table Of Contents stack will be when fixed after scrolling. This option is mainly for those who already have fixed headers on their theme, and need to adjust the top offset to compensate.

Padding

The padding in the General settings area controls the padding around the entire stack itself.

Article Settings

What is an Article?

An article is an individual section inside of the Table of Contents stack. In order to add new sections to your table of contents, you simply have to drag the included Table of Contents Article stack inside of the main stack.

After doing so, you will see a header for the article which can be customized, as well as basic content options.

What type of content can be included in a Table of Contents Article?

Basically anything can be placed inside of a Table of Contents Article. Although we've included some handy content options for making it easier to work with. If you select an Article stack, you will see a content option, which you can use to select 1 of 4 options:

  • Text
  • Markdown
  • HTML
  • Stacks

Simply choose the option that you want for your content, and you'll be good to go.

Vertical Spacing

This option will control the bottom margin of each article, it is basically the vertical space between each article section on the page.

Header & Content Styles

We've created a simple and elegant way to design the actual text content in the articles.

For both Headers, and Content, you can select the font-size for Mobile, Tablet, and Desktop. You will also be able to set the Font-Family, and the color.

Line-heights are automatically created using a golden ratio for beautiful typography ^_-

Table of Contents

The Table of Contents section will change the styles and layout of the actual table of contents that is generate at the top of the stack. Here you can change things like the background, radius, padding, and main title size/color

Padding

This padding will be set around the edges of the Table of Contents at the top of the stack

Radius

The radius will control the roundness of the corners on the Table of Contents

Background

For the background, you can choose between three options:

  • Solid Color
  • Gradient
  • Image

Simply select the optoin you would like, and then adjust the settings accordingly

Main Title

The main title is the title at the very top of the Table of Contents, It will inherit the font that you set for the headers of your articles, for a clean look~

You can also change it's color under this section.

List Items > Initial State

The List Items > Initial State are the items that you will see in the Table of Contents generated at the top of the stack, before starting to scroll. You do not have to create these, as they will automatically be generated for you! : ) You can style them here.

Padding

Here you will able to set a Vertical and Horizontal padding for the list items. Note that these padding options will not apply when the stack becomes fixed to the page after scrolling. The padding only applies when toggled open, or when at the top of the page.

Item Spacing

The item spacing is the vertical spacing between each individual item

Text Size & Color

Here you can set the main size or the text of each list item. This will apply to all items, including when the stack becomes fixed to the page after scroling.

Icon Spacing

The Icon Spacing option will control the space to the left of the circled Numbers and Progress indicators to the left each list item. You can adjust it accordingly

Icon Color

This changes the color of the small number inside of the circle to the left of each item

Icon Background

This changes the actual color of the small circle to the left of eah item

List Items > In Progress

Here you can specify the colors for the list item that appears when an article is currently in progress, or being read. You can set the color of the Text, Icon, Icon Circle, and Progress Circle

  • Text Color

  • Icon Color

  • Icon Background

  • Progress Circle Color

List Items > Complete

Here you can specify the colors for the list item that appears when an article has been read completely. You will see these styles at the end of each article on scroll, or when you expand the table of contents using the toggle. You can set the color of the Text, Icon, Icon Circle, and Progress Circle

  • Text Color

  • Icon Color

  • Icon Background

Toggle Icons

Open Icon

The close icon will appear after the stack becomes fixed to the page on scroll. Users will click this icon to expand the table of contents to jump between sections.

You can set the:

  • Position: left or right
  • Icon Size
  • Icon Color
  • Background Color

Close Icon

The Open Icon will appear after the stack has been expanded. You can set the:

  • Position: Left or Right
  • Icon Color