> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/content-and-information/timeline.md).

# Timeline

The Timeline section is ideal for showcasing your brand story, company history, project milestones, event schedules, or any sequential narrative. It visually presents information in chronological order, enhancing clarity and engagement.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FUJ43behRGtJbxLrMnvj6%2F134f2e4c771aeec9ff686f9107cdedc.jpg?alt=media&amp;token=1041a844-9ea4-471a-ba24-443b0b2745ff" alt=""><figcaption></figcaption></figure>

### 🎨 Color Scheme

* Choose or customize a color scheme to define the visual style of all elements within the section (background color, text color, etc.).
* It's recommended to align colors with your brand's identity for visual consistency.

***

### 🧱 Section Structure

**1. Section Header**

Used for introductory or lead-in content. You can freely combine the following content blocks:

* Badge Group
* Button / Button Group (supports link buttons and video pop-up buttons)
* Countdown Timer
* Description
* Discount Code
* Follow Us
* Heading / Subheading
* Highlighted Statistics
* Icon / Icon with Text
* Keywords
* Link Group
* Social Media List
* Video Button
* Link Text
* Spacer

**2. Timeline Events**

Each item represents a point in time. The following blocks can be used within each event:

* Heading
* Subheading
* Description
* Image (recommended to use consistent sizing for visual balance)
* Video
* Button (can be linked to specific pages)
* Spacer (to control spacing between timeline items)

***

### ✅ Tips for Use

* Organize timeline events in chronological order to ensure a smooth user experience.
* Keep each event concise and focused for better readability.
* Use cohesive icons or images for a professional, branded appearance.
* For interactive elements like videos or buttons, make sure they’re clearly labeled to guide users effectively.