Components
Timeline
Build Semji timelines with Tailwind CSS. Create responsive, chronological event displays for storytelling in web projects.
Alignment
Horizontal
Apply the `timeline` class to the `<ul>` element to establish the foundation for the timeline component. Within the timeline, utilize `<li>` elements to represent individual timeline items.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Vertical
Incorporate the responsive class `timeline-vertical` to create a vertical timeline component.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Types
Basic
The example provided showcases a basic type of timeline.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Icons
The below example showcases a type of timeline with icons.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Content position
Horizontal timeline — Content on both sides
Utilize the following examples to determine the positioning of content within the horizontal timeline component.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Horizontal timeline — Content only on bottom
Use the provided example of a timeline featuring content only on bottom.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Horizontal timeline — Content only on top
Use the provided example of a timeline featuring content only on top.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Horizontal timeline — Content on alternate sides
Use the provided example of a timeline featuring content on alternate sides.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Vertical timeline — Content on both sides
Utilize the following examples to determine the positioning of content within the vertical timeline component.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Vertical timeline — Content only on start
Use the provided example of a timeline featuring content only on start.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Vertical timeline — Content only on end
Use the provided example of a timeline featuring content only on end.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Vertical timeline — Content on alternate sides
Use the provided example of a timeline featuring content on alternate sides.
-
Macintosh PC
-
iMac
-
iPod
-
iPhone
-
Apple Watch
-
Vision Pro
Illustrations
Responsive
Use TailwindCSS classes for <a href="https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range" target="_blank" class="link link-primary">responsive design</a>, such as `sm:`, `md:`, `lg:`, `xl:`, and `2xl:`, along with the responsive class `timeline-horizontal`, to switch the timeline alignment to horizontal at specific breakpoints or vice the versa.
-
1984Macintosh PC
-
1998iMac
-
2001iPod
-
2007iPhone
-
2015Apple Watch
-
2024Vision Pro
Hoverable
Utilize the provided example for a timeline item to implement a background change on hover.
-
12 Invoices have been paid 12 mins ago
Invoices have been paid to the company
-
Client meeting 45 mins agoProject meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
-
Create a new project for client 2 days ago6 team members in a project
+3
Informative timeline — Styled
The Informative timeline provides detailed information about each timeline item, including timestamps and descriptions.
-
12 Invoices have been paid 12 mins ago
Invoices have been paid to the company
-
Client meeting 45 mins agoProject meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
-
Create a new project for client 2 days ago6 team members in a project
+3
Informative timeline — With Icons
The below example showcases a informative timeline with icons.
-
12 Invoices have been paid 12 mins ago
Invoices have been paid to the company
-
Client meeting 45 mins agoProject meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
-
Create a new project for client 2 days ago6 team members in a project
+3
Text in line — Styled
Utilize the provided example for a timeline item where the text is positioned within the timeline path.
-
April 1, 2024
-
12 Invoices have been paid
Invoices have been paid to the company
March 31, 2024
-
Client meeting
Project meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
March 31, 2024
-
Create a new project for client
6 team members in a project
+3
Text in line — With Icons
The examples below showcase a timeline with icons that positioned inline within the timeline path.
-
April 1, 2024
-
12 Invoices have been paid
Invoices have been paid to the company
March 31, 2024
-
Client meeting
Project meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
March 31, 2024
-
Create a new project for client
6 team members in a project
+3
Centered timeline with icons
Apply the modifier class `timeline-centered` to adjust the content positions of `timeline-start` and `timeline-end`. Additionally, include the `timeline-shift` modifier class within the `<li>` element to facilitate content adjustment on smaller screens.
-
2 month’s ago
You've uploaded doc pdf to the Semji
The process of recording the key project details and producing the documents that are required to implement it successfully. Simply put, it's an umbrella term which includes all the documents created over the course of the project.
-
24 day's ago
Heather added 4 images to album
In the Select Image for Project dialog box, choose one of the following: Under the Upload New Image section
-
2 week's ago
Loretta wrote a review on Semji
Loretta Moore
CTO of Airbnb
Verified buyer
I wish I could select more than one main reason for rating this. I love how they constantly work on to make the template better. I am so thankful for this. Also, in the past, they had responded well to my tickets. Thank you for this great theme, for such an amazing support, for the better updates. I wish I could rate this for so many times. I highly recommend this template!
-
A week ago
Julia stiles shared an earnings report
$24,895
10%
Compared to $84,325 last year
ZipcarVuejs, React & HTML$24,895.65
BitbankSketch, Figma & XD$8,6500.20
AviatoHTML & Angular$1,2450.80
-
2 day’s ago
Johnson shared NextJS project
The project organization's structure and process are meticulously crafted to align with both corporate and project goals. Key components include planning, execution, monitoring, controlling, resource allocation, risk management, and stakeholder engagement.
34%
Activity log
Use the provided example for timeline as activity log.
-
John added @verreyne to Semji Group as a member
just now
-
Casey commented on Semji design
3 hours agoHello everyone! I'm excited to inform you about an upcoming webinar hosted by Semji core team, focusing on the topic of effectively measuring your design system. This webinar marks the second session of our new series on #FlyonDesign discussions, where we delve into various aspects of design systems. In this session, we'll be exploring the topic of Measurement.
-
Anna has changed Documentation layout task status from Ongoing to Finished
1 day ago
-
James has changed Forums page task status from pending to Started
1 month ago
-
Collapsed
Use the provided example for timeline with last item collapsed.
-
April 1, 2024
-
12 Invoices have been paid
Invoices have been paid to the company
March 31, 2024
-
Client meeting
Project meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
timeline | component | Container element. |
timeline-start | part | The content inside `<li>` that will be at the start direction. |
timeline-middle | part | The content inside `<li>` that will be at the middle. |
timeline-end | part | The content inside `<li>` that will be at the end direction. |
timeline-snap-icon | modifier | Snaps the icon to the start instead of middle. |
timeline-box | modifier | Applies a box style to timeline-start or timeline-end. |
timeline-compact | modifier | Forces all items on one side. |
timeline-centered | modifier | Sets content position in grid for centered timeline at start. |
timeline-shift | modifier | Facilitates content adjustment on smaller screens. |
timeline-vertical | direction | Shows the timeline vertically. |
timeline-horizontal | direction | Shows the timeline horizontally. |