Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Timeline

A component for displaying a timeline of events.

Basic Usage

Default Event

Event 1 description

2 Hours ago

Success Event

Event 2 description

1 Hour ago

Warning Event

Event 3 description

30 Minutes ago

Vue

<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>
  import { HLTimeline, HLTimelineItem } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Custom Slots

Custom header

Custom content

Default Event

Event 1 description

2 Hours ago

Vue

<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>
  import { HLTimeline, HLTimelineItem, HLText } from '@platform-ui/highrise'
  import { CalendarIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Imports

Vue

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

Props

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	()	The header of the timeline item
content	()	The content of the timeline item
footer	()	The footer of the timeline item
icon	()	The icon of the timeline item