RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Timeline

Displays a vertical sequence of events in chronological order, each with an icon marker, a header, body, and footer. Use it for activity feeds, audit logs, or status histories. For a linear multi-step process (wizard/checkout), use Progress Steps instead.

Basic Usage

Nest HLTimelineItems inside HLTimeline; each item takes header, content, footer, and an #icon slot, with optional icon-color / icon-bg-color.

Default Event

Event 1 description

2 Hours ago

Success Event

Event 2 description

1 Hour ago

Warning Event

Event 3 description

30 Minutes ago

<template>
  <HLTimeline>
    <HLTimelineItem header="Default Event" content="Event 1 description" footer="2 Hours ago">
      <template #icon>
        <CalendarIcon />
      </template>
    </HLTimelineItem>
    <HLTimelineItem
      header="Success Event"
      content="Event 2 description"
      footer="1 Hour ago"
      icon-color="var(--success-700)"
      icon-bg-color="var(--success-100)"
    >
      <template #icon>
        <CalendarIcon />
      </template>
    </HLTimelineItem>
    <HLTimelineItem
      header="Warning Event"
      content="Event 3 description"
      footer="30 Minutes ago"
      icon-color="var(--warning-700)"
      icon-bg-color="var(--warning-100)"
    >
      <template #icon>
        <CalendarIcon />
      </template>
    </HLTimelineItem>
  </HLTimeline>
</template>

<script setup lang="ts">
  import { HLTimeline, HLTimelineItem } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Custom Slots

Use the #header or #footer slots — or the default slot for the body — instead of the props when an item needs richer markup than plain text. (The body has no #content slot; place the content directly inside HLTimelineItem, as shown below.)

Custom header

Custom content

Default Event

Event 1 description

2 Hours ago

<template>
  <HLTimeline>
    <HLTimelineItem icon-color="var(--primary-700)" icon-bg-color="var(--primary-100)">
      <template #icon>
        <CalendarIcon />
      </template>
      <template #header>
        <HLText size="xl" weight="bold">Custom header</HLText>
      </template>
      <div class="bg-gray-100 p-4 rounded-md text-red-600">Custom content</div>
    </HLTimelineItem>
    <HLTimelineItem header="Default Event" content="Event 1 description" footer="2 Hours ago">
      <template #icon>
        <CalendarIcon />
      </template>
    </HLTimelineItem>
  </HLTimeline>
</template>

<script setup lang="ts">
  import { HLTimeline, HLTimelineItem, HLText } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Dynamic Items

The common pattern is to render items from an array with v-for. Feed each item's marker color through icon-color / icon-bg-color, and place richer body markup in the default slot instead of the content prop.

Contact created

Jane Doe was added

2 hours ago

Deal won

Enterprise plan closed

1 hour ago

Task overdue

Follow-up call missed

30 minutes ago

<template>
  <HLTimeline>
    <HLTimelineItem
      v-for="event in events"
      :key="event.id"
      :header="event.header"
      :footer="event.footer"
      :icon-color="event.color"
      :icon-bg-color="event.bg"
    >
      <template #icon>
        <CalendarIcon />
      </template>
      <HLText size="lg" weight="regular">{{ event.body }}</HLText>
    </HLTimelineItem>
  </HLTimeline>
</template>

<script setup lang="ts">
  import { HLTimeline, HLTimelineItem, HLText } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'

  const events = [
    { id: 1, header: 'Contact created', body: 'Jane Doe was added', footer: '2 hours ago', color: 'var(--gray-700)', bg: 'var(--gray-100)' },
    { id: 2, header: 'Deal won', body: 'Enterprise plan closed', footer: '1 hour ago', color: 'var(--success-700)', bg: 'var(--success-100)' },
    { id: 3, header: 'Task overdue', body: 'Follow-up call missed', footer: '30 minutes ago', color: 'var(--warning-700)', bg: 'var(--warning-100)' },
  ]
</script>

Imports

import { HLTimeline, HLTimelineItem } from '@platform-ui/highrise'

Accessibility

• Describe the sequence with aria-label / aria-labelledby, and mark the list container role="list" / role="group" when using custom markup.
• Flag the current item via aria-current="step" and expose timing or status text through aria-describedby.

Props

HLTimeline Props

HLTimeline is a slot-only container — it takes no props, emits no events, and exposes no methods. Configure the timeline entirely through the HLTimelineItems placed in its default slot.

HLTimelineItem Props

Name	Type	Default	Description
header	string | undefined	undefined	The header of the timeline item
content	string | undefined	undefined	The content of the timeline item
footer	string | undefined	undefined	The footer of the timeline item
icon-color	string	var(--gray-700)	The color of the timeline item icon
icon-bg-color	string	var(--gray-100)	The background color of the timeline item icon

Slots

HLTimeline Slots

Name	Parameters	Description
default	()	The default slot for the timeline item

HLTimelineItem Slots

Name	Parameters	Description
header	()	Custom header markup; overrides the header prop
default	()	Custom body markup; overrides the content prop. This is the item's default slot — place content directly inside HLTimelineItem
footer	()	Custom footer markup; overrides the footer prop
icon	()	Icon shown in the item's marker (wrapped in a FeatureIcon tinted by icon-color / icon-bg-color)