Section Timeline

The VSectionTimeline component is designed to display a timeline with customizable items and an optional "Show All" toggle. It includes cards for detailed information and a button for additional actions.

Props

Prop Name	Type	Default	Required	Description
`data`	`ICaseStudiesTimelineItem[]`	`undefined`	Yes	Array of timeline data objects defining each timeline section and its content.
`prev`	`String`	`undefined`	No	URL for the "Previous" navigation link.
`next`	`String`	`undefined`	No	URL for the "Next" navigation link.
`topic`	`String`	`undefined`	No	Topic parameter for the action button's URL.
`title`	`String`	`undefined`	No	Title of the timeline section.
`showAll`	`Boolean`	`false`	No	Determines whether to display all timeline items or only the first one.
`horizontal`	`Boolean`	`false`	No	Determines whether the timeline should be displayed horizontally.

interface ICaseStudiesTimelineItemCard {
  title: string;
  duration: string;
  text: string;
  type?: 'active' | 'complete' | 'not-complete';
  variant?: 'primary' | 'inner' | 'highlight';
}
interface ICaseStudiesTimelineItem {
  circleType?: 'active' | 'not-complete' | 'complete' | 'highlight';
  title: string;
  items: ICaseStudiesTimelineItemCard[];
}

Slots

Slot Name	Description
`title`	Slot to customize the timeline's title section.

Example

vue

<script setup lang="ts">
import VSectionTimeline from 'UiKit/components/VSection/VSectionTimeline.vue';

const timelineData = [
  {
    title: "Phase 1",
    circleType: "highlight",
    items: [
      {
        title: "Task 1",
        text: "Description of task 1.",
        duration: "1 month",
        variant: "primary",
      },
    ],
  },
  {
    title: "Phase 2",
    items: [
      {
        title: "Task 2",
        text: "Description of task 2.",
        duration: "2 months",
        variant: "highlight",
      },
    ],
  },
];
</script>

<template>
  <VSectionTimeline
    :data="timelineData"
    title="Project Timeline"
    topic="project-timeline"
    :showAll="true"
  />
</template>

Project Timeline

Phase 1
Task 1
Duration: 1 month
Description of task 1.
Phase 2
Task 2
Duration: 2 months
Description of task 2.

Horizontal

vue

<script setup lang="ts">
import VSectionTimeline from 'UiKit/components/VSection/VSectionTimeline.vue';

const timelineData = [
  {
    title: "Phase 1",
    circleType: "highlight",
    items: [
      {
        title: "Task 1",
        text: "Description of task 1.",
      },
    ],
  },
  {
    title: "Phase 2",
    items: [
      {
        title: "Task 2",
        text: "Description of task 2.",
      },
    ],
  },
];
</script>

<template>
  <VSectionTimeline
    :data="timelineData"
    title="Project Timeline"
    topic="project-timeline"
    :showAll="true"
    horizontal
  />
</template>

Project Timeline

Phase 1
Task 1
Description of task 1.
Phase 2
Task 2
Description of task 2.