Component

Timeline

An ordered list of events joined by a connecting line. Compose each item from a marker, content, and an optional opposite slot; colour and shape the markers; run it vertically or horizontally; align items to one side or alternate them; and make items interactive.

Markers, colours & variants

Taken

Oak leaves photographed in Freiburg.

Edited

Cropped and colour-corrected.

Needs caption

Still waiting for a title.

Archived

Saved to the Herbst album.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import {
  phosphorCheck,
  phosphorLeaf,
  phosphorTag,
  phosphorWarning,
} from '@ng-icons/phosphor-icons/regular';

import { HbTimelineImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-timeline-basic',
  imports: [HbTimelineImports],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorTag, phosphorCheck, phosphorWarning })],
  template: `
    <hb-timeline class="w-full max-w-sm">
      <hb-timeline-item>
        <hb-timeline-marker hbColor="success" hbIcon="phosphorCheck" />
        <hb-timeline-content>
          <p class="font-medium">Taken</p>
          <p class="text-muted-foreground">Oak leaves photographed in Freiburg.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="primary" hbIcon="phosphorLeaf" />
        <hb-timeline-content>
          <p class="font-medium">Edited</p>
          <p class="text-muted-foreground">Cropped and colour-corrected.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="warning" hbVariant="soft" hbIcon="phosphorWarning" />
        <hb-timeline-content>
          <p class="font-medium">Needs caption</p>
          <p class="text-muted-foreground">Still waiting for a title.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="muted" hbVariant="outline" hbIcon="phosphorTag" />
        <hb-timeline-content>
          <p class="font-medium">Archived</p>
          <p class="text-muted-foreground">Saved to the Herbst album.</p>
        </hb-timeline-content>
      </hb-timeline-item>
    </hb-timeline>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTimelineBasicComponent {}

Alternate, opposite & connector

08:00

Set out into the Black Forest.

10:30

Photographed the first oak leaves.

13:00

Stopped for tea in the mist.

16:00

Headed home as the light faded.

Horizontal & interactive

Collect

Press

Mount

Label

API reference

hb-timeline

Property	Description	Type	Default
[hbLayout]	Flow items top-to-bottom or left-to-right (the horizontal track scrolls when it overflows).	'vertical' \| 'horizontal'	'vertical'
[hbAlign]	Side the content sits on. Vertical: left / right / alternate. Horizontal: top / bottom / alternate.	'left' \| 'right' \| 'top' \| 'bottom' \| 'alternate'	'left'

hb-timeline-item

Property	Description	Type	Default
[hbInteractive]	Make the item a focusable button — adds hover/focus styling and keyboard activation.	boolean	false
(hbSelect)	Emits when an interactive item is clicked or activated with Enter/Space.	void	—

hb-timeline-marker

Property	Description	Type	Default
[hbColor]	The marker colour.	'default' \| 'primary' \| 'success' \| 'warning' \| 'destructive' \| 'muted'	'primary'
[hbVariant]	Fill style: filled, tinted, or outlined.	'solid' \| 'soft' \| 'outline'	'solid'
[hbIcon]	Icon name to render inside the marker; otherwise projected content (or a plain dot) is used.	string	''

Slots

Property	Description	Type	Default
hb-timeline-content	The main body of the item — title, description, or any markup.	component	—
hb-timeline-opposite	Secondary content on the far side of the line — typically a timestamp or label.	component	—
hb-timeline-connector [class]	Replace the default connecting line for one item — e.g. to colour a segment. The last item hides its connector automatically.	component	—