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.
Timeline Block - Load More
Click button to load additional timeline entries
- Jan 1🎉
New Year Launch
Started the year with ambitious goals and fresh energy.
- Jan 15💡
Innovation Workshop
Team brainstorming session generated 20+ new feature ideas.
- Feb 1🔧
Infrastructure Update
Migrated to containerized deployment for better scalability.
Timeline Block - Virtual Scroll
Automatically loads more entries as you scroll down
- Week 1📝
Requirements Gathering
Met with stakeholders to understand project requirements and constraints.
- Week 2🎨
Design Phase
Created wireframes and mockups for all major application screens.
- Week 3⚡
Prototype Development
Built interactive prototype to validate design decisions.
Layout Modifiers
Control alignment (start/center/end) and responsive behavior independently
Start Aligned
--start- Jan📝
Planning
Initial project planning phase.
- Feb🚀
Launch
Product launch and rollout.
- Mar✅
Complete
Project successfully delivered.
End Aligned
--end- Jan📝
Planning
Initial project planning phase.
- Feb🚀
Launch
Product launch and rollout.
- Mar✅
Complete
Project successfully delivered.
Keep Layout
--keep-layout- Jan📝
Planning
Stays alternating on mobile.
- Feb🚀
Launch
Zig-zag preserved on small screens.
- Mar✅
Complete
Layout maintained at all widths.
Start + Keep Layout
--start --keep-layout- Q1📊
Analysis
Market research and competitive analysis completed.
- Q2🎨
Design
UI/UX design and prototyping phase.
- Q3💻
Development
Implementation and testing phase.
End + Keep Layout
--end --keep-layout- Q1📊
Analysis
Market research and competitive analysis completed.
- Q2🎨
Design
UI/UX design and prototyping phase.
- Q3💻
Development
Implementation and testing phase.
Usage Examples
Basic Alternating Timeline
<Timeline variant="alternating">
<TimelineItem date="15 Dec" iconText="🏠">
<Heading level={4}>Project Started</Heading>
<Paragraph>Description here</Paragraph>
</TimelineItem>
</Timeline>Layout Modifiers
<!-- Force all items to start side -->
<Timeline variant="alternating" alignment="start">...</Timeline>
<!-- Force all items to end side -->
<Timeline variant="alternating" alignment="end">...</Timeline>
<!-- Preserve zig-zag layout on mobile -->
<Timeline variant="alternating" shouldKeepLayout>...</Timeline>
<!-- Combination -->
<Timeline variant="alternating" alignment="start" shouldKeepLayout>...</Timeline>Best Practices
- Use
variant="alternating"for project roadmaps and milestone timelines - Add emojis or icons to timeline headers for visual interest
- Use
alignment="start"/"end"for narrow cards where zig-zag would feel cramped - Use
shouldKeepLayoutwhen the design must hold its alternating shape across breakpoints - For long lists, pair
pa-timeline__scroll-containerwith an IntersectionObserver for lazy loading