Centered timeline with items alternating start and end - great for storytelling

Timeline Block

Centered alternating layout

    15 Dec
    🏠

    Project Started

    New project "Pure Admin Dashboard" has been initialized with base configuration and team setup.

    22 Oct
    🎁

    First Release

    Version 1.0 released to production with core features and documentation.

    10 Jul
    👤

    Team Expansion

    Added three new developers to the team to accelerate development.

    18 May
    🏃

    Sprint Milestone

    Completed major refactoring sprint, improving code quality and performance.

    10 Feb
    ⚙️

    System Upgrade

    Migrated to new infrastructure with improved scalability and reliability.

    01 Jan
    🏆

    Award Recognition

    Received "Best Admin Framework" award from the developer community.

Timeline Block

Another example with different content

    Q1 2024
    📋

    Planning Phase

    Strategic planning and goal setting for the year ahead.

    Q2 2024
    🚀

    Launch Preparation

    Final testing and deployment preparation phase.

    Q3 2024
    📈

    Growth Period

    User acquisition and feature expansion phase.

    Q4 2024
    🎯

    Optimization

    Performance improvements and user feedback implementation.

Layout Modifiers

Start Aligned

All items on start side

    Jan
    💡

    Idea

    Initial concept and brainstorming.

    Feb
    🔧

    Build

    Development and implementation.

    Mar
    🚀

    Launch

    Product release and deployment.

End Aligned

All items on end side

    Jan
    💡

    Idea

    Initial concept and brainstorming.

    Feb
    🔧

    Build

    Development and implementation.

    Mar
    🚀

    Launch

    Product release and deployment.

Keep Layout

No mobile collapse

    Jan
    💡

    Idea

    Initial concept and brainstorming.

    Feb
    🔧

    Build

    Development and implementation.

    Mar
    🚀

    Launch

    Layout maintained at all widths.

Start + Keep Layout

Start-aligned, stays start on mobile

    Step 1
    📋

    Plan

    Define objectives and milestones.

    Step 2
    🔧

    Execute

    Implement the plan with the team.

    Step 3
    ✅

    Review

    Evaluate results and iterate.

End + Keep Layout

End-aligned, stays end on mobile

    Step 1
    📋

    Plan

    Define objectives and milestones.

    Step 2
    🔧

    Execute

    Implement the plan with the team.

    Step 3
    ✅

    Review

    Evaluate results and iterate.

John Doe

Administrator

Settings

Press Ctrl+K to preview the palette.
Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.
Commands
🚀
Deploy to Environment
Deploy a branch to an environment
g d
👤
Assign to User
Assign an item to a team member
g a
🧭
Go to Page
Navigate to a page
g g
🎨
Switch Theme
Change the visual theme
g t
Search
📦
Products
Search products
:products
📋
Orders
Search orders
:orders
👥
Users
Search users
:users
🧾
Invoices
Search invoices
:invoices