Timelines

The Timelines block displays a chronological sequence of events, milestones, or process steps in a visually structured layout. Ideal for brand stories, product development journeys, service workflows, or company history.

Settings

• Enable full width: Expand the block to 100% of the viewport width.
• Block class: Custom CSS class for spacing or layout overrides.
• Background: Set a solid or gradient background color.
• Or, use image: Apply a background image using a preset from Theme Settings → Style scheme settings → Background Image Schema.

  All four settings above follow: Blocks → Overview → General Settings

Child Blocks – Column

The timeline is built with alternating media columns and text columns.

Media Column

Supports rich media content on one side of the timeline:

Image

Settings follow Blocks → Basic Block → Stars

Video

Settings follow Blocks → Basic Block → Video.

3D model

Settings follow Blocks → Basic Block → 3D Model.

Media blocks use standard settings from their respective basic blocks.

Text Column – Timeline Block

Each timeline entry with content and styling.

• Icon: Choose from the built-in icon library to display on the timeline’s left (or right, depending on layout).
• Or, custom icon: Upload a custom SVG or image icon.
• Card style: Visual styling for the content card, selected from Theme Settings → Style scheme settings → Cards Style Schema.
• Time: Date or label for the timeline point (e.g., “2020”, “Phase 1”).
• Time size: Font size for the time label, using typography variables from Theme Settings → Basic Settings → Typography.
• Time color: Text color for the time label, chosen from Theme Settings → Basic Settings → Colors.
• Per row (desktop): Number of child elements (e.g., images, videos) displayed per row within this timeline item on desktop.
• Per row (mobile): Same as above, for mobile devices.
• Animations on scroll: Apply entrance animations as the timeline enters the viewport.

Supported Child Blocks

Within each timeline entry, you can include:

Heading

Milestone title (e.g., “Launch of First Product”). Settings follow Blocks → Basic Block → Heading.

Text

Detailed description or narrative. Settings follow Blocks → Basic Block → Text.

Image

Settings follow Blocks → Basic Block → Image.

Video

Settings follow Blocks → Basic Block → Video.

3D model

Supporting media to enrich the story. Settings follow Blocks → Basic Block → 3D Model.

💡 Tip: Use consistent time formatting and media ratios for a clean, professional timeline experience.