Timeline

Vertical timeline (alternate / left), an activity feed and a horizontal timeline.

Timeline

Timeline

Vue

<ThlTimeline :items="timeline.slice(0, 4)" />

React

<Timeline items={timeline} />
<Timeline items={timeline} variant="left" />

Angular

<thl-timeline [items]="timeline" />
<thl-timeline [items]="timeline" variant="left" />

ActivityFeed & horizontal

ActivityFeed & horizontal

Vue

<div class="thl-stack"><ThlActivityFeed :items="feed" /><ThlHorizontalTimeline :items="hItems" /></div>

React

<ActivityFeed items={feed} />
<HorizontalTimeline items={hItems} />

Angular

<thl-activity-feed [items]="feed" />
<thl-horizontal-timeline [items]="hItems" />

API

Timeline

<ThlTimeline> · import { ThlTimeline } from '@thl-ui/vue'

Prop	Type	Default
items*	array	—
variant	string	"alternate"
headingLevel	number	3

Slots: item

ActivityFeed

<ThlActivityFeed> · import { ThlActivityFeed } from '@thl-ui/vue'

Prop	Type	Default
items*	array	—

HorizontalTimeline

<ThlHorizontalTimeline> · import { ThlHorizontalTimeline } from '@thl-ui/vue'

Prop	Type	Default
items*	array	—
headingLevel	number	3