Timeline arranges items in a single row on large screens. A horizontal line connects numbered badges across the top, and each item's content sits below its badge. Courseau numbers the items for you, starting at 1. Numbers update as you add, remove, or reorder items.
Timeline works well for:
• historical events or project milestones
• release notes or version history
• the stages of a career, product, or process
• any content where progression across time matters
On narrow screens, Timeline stacks into a single column, so the sequence stays readable on any device.
Timeline and Steps both show ordered, numbered items. The difference is direction and emphasis:
• Timeline: horizontal on large screens, with a connecting line. Best for showing progression across time
• Steps: vertical at all screen sizes, with large left-side badges. Best for walking through a process one step at a time
You can add a Timeline anywhere in a lesson card.
1. Open the lesson in the lesson editor.
2. Place the cursor on an empty line inside a card.
3. Type / to open the insert menu, then select Timeline.
The editor adds a Timeline with 2 items. Each item starts with a placeholder heading and description.
Each item accepts any kind of block content. You can add:
• headings and paragraphs
• images, videos, and other media
• code blocks
• nested layout blocks
To edit an item, select inside the content area and type or paste your content.
A Timeline supports 2 to 10 items.
1. Select the Timeline block.
2. In the toolbar, find the cell counter.
3. Select + to add an item at the end, or − to remove the last item.
To add an item between two existing items, select inside an item and then select Add item in the cell toolbar. Courseau inserts a new item after the current one and renumbers the sequence.
The toolbar above a selected Timeline offers more controls.
• Layout type: switch between Grid, Steps, Timeline, Alternating, and Cycle
• Color: set a color for the connecting line and all badges in the block
• Constrain width: limit the block to 800 pixels wide, or switch to Full width to fill the page
You can also override the color of an individual badge. Select the item, then pick a color from the cell toolbar.
Layout & columns
Configure the column layout of your card
Layout block width
The Constrain width option controls how wide a layout block spans on the lesson page. You can set the width for each block, so different layouts in the same lesson can use different widths.
