Timeline Block
-
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
-
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
-
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
-
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
-
Jan
Planning
Initial project planning phase.
-
Feb
Launch
Product launch and rollout.
-
Mar
Complete
Project successfully delivered.
End Aligned
-
Jan
Planning
Initial project planning phase.
-
Feb
Launch
Product launch and rollout.
-
Mar
Complete
Project successfully delivered.
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
-
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
-
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
<ul class="pa-timeline pa-timeline--alternating">
<li class="pa-timeline__item">
<div class="pa-timeline__date">15 Dec</div>
<div class="pa-timeline__icon"><svg ...></svg></div>
<div class="pa-timeline__content">
<h3>Project Started</h3>
<p>Description here</p>
</div>
</li>
</ul>
Layout Modifiers
<!-- Force all items to start side --> <ul class="pa-timeline pa-timeline--alternating pa-timeline--start">...</ul> <!-- Force all items to end side --> <ul class="pa-timeline pa-timeline--alternating pa-timeline--end">...</ul> <!-- Preserve zig-zag layout on mobile --> <ul class="pa-timeline pa-timeline--alternating pa-timeline--keep-layout">...</ul>
Best Practices
- Use
pa-timeline--alternatingfor project roadmaps and milestone timelines - Add icons to timeline items for visual interest
- Use
pa-timeline--start/--endfor narrow cards where zig-zag would feel cramped - Use
pa-timeline--keep-layoutwhen the design must hold its alternating shape across breakpoints - For long lists, pair
pa-timeline__scroll-containerwith an IntersectionObserver for lazy loading