Timeline Showcase Card

1. Module Location

The Timeline Showcase Card module is saved in the Design Manager, under Content.

Path: Manage → Content → Design Manager

2. How to Use the Module

Step 1 — Find the module

Click the + icon in the page editor to open Add modules, then search for the module name “Timeline Showcase Card.”

Step 2 — Add it to the page

Drag the module from the search results panel onto the desired section of the page.

Step 3 — Edit the content

Open the module's Content tab to edit the Eyebrow, Heading, and the list of Milestones.

To update an individual milestone, hover over the item in the Milestones list and click the pencil icon that appears. Each milestone has four fields: Year, Badge, Heading, and Description. Use the Previous / Next controls at the top to move between items. You can add up to 12 milestones.

Step 4 — Customize the styling

Switch to the Styles tab to adjust the module's appearance. Styling is organized into four collapsible groups: Section Background, Typography, Cards, and Milestones.

Section Background

Set the background color, the Top / Bottom Spacing (in px, 0–200) around the section, the Timeline Line color (the vertical rail), and the Dot color on the rail.

Typography

Control font family, size, weight, and color for the Eyebrow and the section Heading.

Cards

Customize the milestone card Background, Border color, Corner Radius (px, 0–40), and the Badge Background color.

Milestones

Set the fonts for the Year, Milestone Heading, Milestone Description, and Badge text independently.

3. Quick Reference

• Add module: Search “Timeline Showcase Card” → drag onto page
• Edit content: Content tab → Eyebrow / Heading / Milestones list
• Edit a single milestone: hover → pencil icon → Year / Badge / Heading / Description
• Milestone limit: 1–12 items
• Edit styling: Styles tab → Section Background / Typography / Cards / Milestones