Timeline

The Timeline component provides a vertical overview of events, milestones, or steps in a process.

Default timeline

Displays dated milestones with the current step highlighted.

14 Jan 2026

14 Jan 2026

Planning approved

Project scope, budget, and owners are confirmed so implementation can begin.
2 Feb 2026

2 Feb 2026

Design direction locked

Key visual decisions, copy structure, and component dependencies are aligned.
18 Feb 2026

18 Feb 2026

Development in progress

The component is integrated into the library and prepared for review in the styleguide.
3 Mar 2026

3 Mar 2026

Launch and follow-up

The final release is published together with guidance for editors and designers.

<ul class="c-timeline">
            <li class="c-timeline__event ">
                            <div class="c-timeline__date u-visibility--hidden@sm u-visibility--hidden@xs">
                    <time datetime="2026-01-14">14 Jan 2026</time>
                </div>
                        <div class="c-timeline__marker">
                                    <div class="c-timeline__date u-visibility--hidden@md u-visibility--hidden@lg u-visibility--hidden@xl">
                        <time datetime="2026-01-14">14 Jan 2026</time>
                    </div>
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be4f0b" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be50f8" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be50b1" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5012" data-component="typography">
    Planning approved
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be515e" data-component="typography">
    Project scope, budget, and owners are confirmed so implementation can begin.
</p>         </div>
        
            </div>
</div>
        </li>
            <li class="c-timeline__event c-timeline__event--active ">
                            <div class="c-timeline__date u-visibility--hidden@sm u-visibility--hidden@xs">
                    <time datetime="2026-02-02">2 Feb 2026</time>
                </div>
                        <div class="c-timeline__marker">
                                    <div class="c-timeline__date u-visibility--hidden@md u-visibility--hidden@lg u-visibility--hidden@xl">
                        <time datetime="2026-02-02">2 Feb 2026</time>
                    </div>
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be51bb" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be52a1" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be526d" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5236" data-component="typography">
    Design direction locked
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be52eb" data-component="typography">
    Key visual decisions, copy structure, and component dependencies are aligned.
</p>         </div>
        
            </div>
</div>
        </li>
            <li class="c-timeline__event ">
                            <div class="c-timeline__date u-visibility--hidden@sm u-visibility--hidden@xs">
                    <time datetime="2026-02-18">18 Feb 2026</time>
                </div>
                        <div class="c-timeline__marker">
                                    <div class="c-timeline__date u-visibility--hidden@md u-visibility--hidden@lg u-visibility--hidden@xl">
                        <time datetime="2026-02-18">18 Feb 2026</time>
                    </div>
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be533e" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be5417" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be53e5" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be53b1" data-component="typography">
    Development in progress
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be5468" data-component="typography">
    The component is integrated into the library and prepared for review in the styleguide.
</p>         </div>
        
            </div>
</div>
        </li>
            <li class="c-timeline__event ">
                            <div class="c-timeline__date u-visibility--hidden@sm u-visibility--hidden@xs">
                    <time datetime="2026-03-03">3 Mar 2026</time>
                </div>
                        <div class="c-timeline__marker">
                                    <div class="c-timeline__date u-visibility--hidden@md u-visibility--hidden@lg u-visibility--hidden@xl">
                        <time datetime="2026-03-03">3 Mar 2026</time>
                    </div>
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be54b7" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be558d" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be555b" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5527" data-component="typography">
    Launch and follow-up
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be55d4" data-component="typography">
    The final release is published together with guidance for editors and designers.
</p>         </div>
        
            </div>
</div>
        </li>
    </ul>

@timeline([
	'events' => [
		[
			'timelineDate' => '<time datetime="2026-01-14">14 Jan 2026</time>',
			'title' => 'Planning approved',
			'content' => 'Project scope, budget, and owners are confirmed so implementation can begin.',
		],
		[
			'timelineDate' => '<time datetime="2026-02-02">2 Feb 2026</time>',
			'title' => 'Design direction locked',
			'content' => 'Key visual decisions, copy structure, and component dependencies are aligned.',
			'active_step' => true,
		],
		[
			'timelineDate' => '<time datetime="2026-02-18">18 Feb 2026</time>',
			'title' => 'Development in progress',
			'content' => 'The component is integrated into the library and prepared for review in the styleguide.',
		],
		[
			'timelineDate' => '<time datetime="2026-03-03">3 Mar 2026</time>',
			'title' => 'Launch and follow-up',
			'content' => 'The final release is published together with guidance for editors and designers.',
		],
	],
])
@endtimeline

Sequential timeline

Collapses the date column for step-by-step process presentations.

Collect requirements

Gather the content, ordering, and interaction rules that the timeline should support.
Build the showcase

Add examples and local styles so the component can be reviewed and iterated inside the styleguide.
Validate the output

Run the local checks and confirm the component appears correctly in the documentation site.

<ul class="c-timeline c-timeline--sequential">
            <li class="c-timeline__event ">
                        <div class="c-timeline__marker">
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be59e2" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be5af8" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be5abc" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5a79" data-component="typography">
    Collect requirements
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be5b4e" data-component="typography">
    Gather the content, ordering, and interaction rules that the timeline should support.
</p>         </div>
        
            </div>
</div>
        </li>
            <li class="c-timeline__event c-timeline__event--active ">
                        <div class="c-timeline__marker">
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be5ba5" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be5c9a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be5c64" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5c2b" data-component="typography">
    Build the showcase
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be5cea" data-component="typography">
    Add examples and local styles so the component can be reviewed and iterated inside the styleguide.
</p>         </div>
        
            </div>
</div>
        </li>
            <li class="c-timeline__event ">
                        <div class="c-timeline__marker">
                            </div>

                <!-- card.blade.php -->
<div class="c-card c-timeline__event__card c-card--ratio-16-9" data-uid="6a0f277be5d3d" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a0f277be5e22" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a0f277be5ded" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a0f277be5db6" data-component="typography">
    Validate the output
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a0f277be5e6d" data-component="typography">
    Run the local checks and confirm the component appears correctly in the documentation site.
</p>         </div>
        
            </div>
</div>
        </li>
    </ul>

@timeline([
	'sequential' => true,
	'events' => [
		[
			'title' => 'Collect requirements',
			'content' => 'Gather the content, ordering, and interaction rules that the timeline should support.',
		],
		[
			'title' => 'Build the showcase',
			'content' => 'Add examples and local styles so the component can be reviewed and iterated inside the styleguide.',
			'active_step' => true,
		],
		[
			'title' => 'Validate the output',
			'content' => 'Run the local checks and confirm the component appears correctly in the documentation site.',
		],
	],
])
@endtimeline

API

Parameter	Default	Description
events	[]	An array of events
sequential	false	If true, the events will be displayed in a sequential order

CSS API

Variable	Default	Type	Values	Description
--c-timeline--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-timeline--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-timeline--border-width	var(--border-width)	range	-	Size
--c-timeline--border-radius	var(--border-radius)	range	-	Border Radius
--c-timeline--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-timeline--color--primary	var(--color--primary)	color	-	Primary
--c-timeline--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-timeline--color--surface	var(--color--surface)	color	-	Surface
--c-timeline--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-timeline--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-timeline--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-timeline--font-size-100	var(--font-size-100)	range	-	Base font size.

Similar components

Listing Card Progressbar