Timeline

Default

Combine .timeline, .timeline-item and .timeline-dot. Add .is-active for the current item.

1. Frontend Architect

   2024 - today

   Building scalable frontend architectures, design systems and component libraries.

2. Senior Frontend Developer

   2021 - 2024

   Developed modern web applications with Angular, TypeScript and SCSS.

3. Web Developer

   2018 - 2021

   Created websites, landing pages and custom frontend solutions.

<ol class="timeline">
	<li class="timeline-item is-active">
		<div class="timeline-dot" aria-hidden="true"></div>

		<div>
			<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
				<h3 class="mb-0">Frontend Architect</h3>
				<span class="badge bg-primary">2024 - today</span>
			</div>

			<p class="mb-0 text-muted">
				Building scalable frontend architectures, design systems and component libraries.
			</p>
		</div>
	</li>

	<li class="timeline-item">
		<div class="timeline-dot" aria-hidden="true"></div>

		<div>
			<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
				<h3 class="mb-0">Senior Frontend Developer</h3>
				<span class="badge bg-primary">2021 - 2024</span>
			</div>

			<p class="mb-0 text-muted">
				Developed modern web applications with Angular, TypeScript and SCSS.
			</p>
		</div>
	</li>
</ol>

Numbered timeline

Add .timeline-numbered for numbered events or static processes. Use the Stepper for progress states.

1. Set up system

   Step 1

   Install and configure all required system dependencies.

2. Test workflow

   Step 2

   Run the main workflow and check if all required steps are working.

3. Go live

   Step 3

   Publish the final setup after testing has been completed.

<ol class="timeline timeline-numbered">
	<li class="timeline-item is-active">
		<div class="timeline-dot" aria-hidden="true"></div>

		<div>
			<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
				<h3 class="mb-0">Set up system</h3>
				<span class="badge bg-primary">Step 1</span>
			</div>

			<p class="mb-0 text-muted">Install and configure all required system dependencies.</p>
		</div>
	</li>

	<li class="timeline-item">
		<div class="timeline-dot" aria-hidden="true"></div>

		<div>
			<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
				<h3 class="mb-0">Test workflow</h3>
				<span class="badge bg-secondary">Step 2</span>
			</div>

			<p class="mb-0 text-muted">
				Run the main workflow and check if all required steps are working.
			</p>
		</div>
	</li>

	<li class="timeline-item">
		<div class="timeline-dot" aria-hidden="true"></div>

		<div>
			<div class="d-flex flex-wrap align-items-center gap-2 mb-1">
				<h3 class="mb-0">Go live</h3>
				<span class="badge bg-secondary">Step 3</span>
			</div>

			<p class="mb-0 text-muted">Publish the final setup after testing has been completed.</p>
		</div>
	</li>
</ol>

CSS Variables

Override these variables on the component or an ancestor.

--timeline-line-color: var(--border-color);
--timeline-line-width: var(--border-width);
--timeline-dot-size: 0.75rem;
--timeline-dot-offset-y: var(--spacer-3);
--timeline-dot-center-y: calc(var(--timeline-dot-offset-y) + (var(--timeline-dot-size) / 2));
--timeline-dot-color: var(--border-color);
--timeline-dot-active-color: var(--primary);
--timeline-dot-ring-color: var(--bg-body);
--timeline-dot-ring-size: 0.25rem;
--timeline-gap: var(--spacer-3);
--timeline-item-padding-bottom: var(--spacer-4);
--timeline-item-line-color: var(--timeline-line-color);
--timeline-dot-number-color: var(--text-muted);
--timeline-dot-active-number-color: var(--on-primary);
--timeline-dot-border-width: var(--border-width);
--timeline-dot-border-color: var(--border-color);