Components
Timeline
The timeline component is designed to display events in chronological order, ideal for showcasing history, project milestones, or event sequences.
Basic
The timeline component has three main classes `.timeline`, `.checkpoint` and `.checkpoint-icon`.
- `.timeline`: Create a timeline. One timeline has multiple checkpoints.
- `.checkpoint`: Create a checkpoint.
- `.checkpoint-icon`: Define the checkpoint icon.
Attention needed
Everything inside the `.checkpoint` element that do not have the `.checkpoint-icon` class will be consider a `content`.🐞 Release v5.2.0 quick bug fix
Find more detailed insctructions here.
Types
We provide differents checkpoints styles, such as `solid`, `outline`, `link`, `white` and `black`.
You can change the checkpoint style using differents classes in the `.checkpoint` element.
Created "Perfect UI in Vue" task
Find more detailed insctructions here.
Amanda Ketellyn
🐞 Release v5.2.0 quick bug fix
Kamilly Aldrey
Take a break ⛳️
Just chill for now... 😉
📦 Update "Perfect UI" packages
Amanda Ketellyn
Feature fixed as a priority
Kamilly Aldrey
Solid checkpoints
To create a solid checkpoint, simply use the `.checkpoint-solid-[variant]` classes.
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Outline checkpoints
To create a outline checkpoint, simply use the `.checkpoint-outline-[variant]` classes.
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Link checkpoints
To create a link checkpoint, simply use the `.checkpoint-link-[variant]` classes.
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
White/Black checkpoints
To create a white or black checkpoint, simply use the `.checkpoint-white` or `.checkpoint-black` classes.
Created "Perfect UI in Vue" task
Created "Perfect UI in Vue" task
Horizontal
To create horizontal timelines, simply add the `.group-row` class in the `.timeline` parent.
Created "Perfect UI in Vue" task
Find more detailed insctructions here.
Amanda Ketellyn
🐞 Release v5.2.0 quick bug fix
Kamilly Aldrey
📦 Update "Perfect UI" packages
Amanda Ketellyn
Responsive
Use Layout Group to create responsible timelines.
Simply add the `.group-responsive` class in the `.timeline` parent.
Created "Perfect UI in Vue" task
Find more detailed insctructions here.
Amanda Ketellyn
🐞 Release v5.2.0 quick bug fix
Kamilly Aldrey
📦 Update "Perfect UI" packages
Amanda Ketellyn