Basic Alternating Timeline

<Timeline variant="alternating">
  <TimelineItem date="15 Dec">
    {#snippet icon()}<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>{/snippet}
    <Heading level={3}>Project Started</Heading>
    <Paragraph>Description here</Paragraph>
  </TimelineItem>
</Timeline>

Layout Modifiers

<!-- Force all items to start side -->
<Timeline variant="alternating" side="start">...</Timeline>

<!-- Force all items to end side -->
<Timeline variant="alternating" side="end">...</Timeline>

<!-- Preserve zig-zag layout on mobile -->
<Timeline variant="alternating" isKeepLayout>...</Timeline>

<!-- Combination -->
<Timeline variant="alternating" side="start" isKeepLayout>...</Timeline>

Best Practices

• Use variant="alternating" for project roadmaps and milestone timelines
• Add emojis or icons to timeline headers for visual interest
• Use side="start"/"end" for narrow cards where zig-zag would feel cramped
• Use isKeepLayout when the design must hold its alternating shape across breakpoints
• For long lists, pair pa-timeline__scroll-container with an IntersectionObserver for lazy loading