# Journey Timeline A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-journey-timeline--introduction ## Variants documented in Storybook - Vertical Timeline: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-journey-timeline--vertical-timeline - Horizontal Timeline: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-journey-timeline--horizontal-timeline ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Journey Timeline. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Horizontal Timeline — Horizontal Timeline HTML: ```html
Title Description
token
check
check
check
check
check
Date Title Tag
``` React: ```jsx import React from 'react'; const JourneyTimelineExample1Demo = () => ( <> {/* Variant: Horizontal Timeline */}
Title Description
token
{/* Step 1: Completed */}
check
{/* Step 2: Active */}
check
{/* Step 3: Pending */}
check
{/* Step 4: Pending */}
check
{/* Step 5: Pending */}
check
Date Title Tag
); export default JourneyTimelineExample1Demo; ``` Angular: ```html
Title Description
token
check
check
check
check
check
Date Title Tag
``` ### 2. Introduction — Introduction HTML: ```html
Components

Journey Timeline

A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys.

Implementation Showcase

Visual demonstration of Journey Timeline variations.

Journey Timeline Vertical

Title Description
token
check
Date Title Tag
check
Date
Title Helping Text
Tag
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag

Journey Timeline Horizontal

Title Description
token
check
check
check
check
check
Date Title Tag

CSS Class Reference

Quickly copy layout and utility classes for Journey Timelines.

Structural Classes

Timeline Card Container journey-timeline-card
Timeline Container ux4g-journey-timeline
Individual Step ux4g-journey-step
Step Icon/Dot Indicator ux4g-journey-indicator
Step Detail Card ux4g-journey-card
Step Information Area ux4g-journey-info

Variant & State Utilities

Vertical Layout ux4g-journey-timeline--vertical
Horizontal Layout ux4g-journey-timeline--horizontal
Completed State ux4g-journey-step-completed
Active State ux4g-journey-step-active
Status Dot Indicator ux4g-journey-status-dot
``` React: ```jsx import React from 'react'; const JourneyTimelineExample2Demo = () => ( <>
Components

Journey Timeline

A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys.

Implementation Showcase

Visual demonstration of Journey Timeline variations.

Journey Timeline Vertical

Title Description
token
{/* Step 1: Completed */}
check
Date Title Tag
{/* Step 2: Active */}
check
Date
Title Helping Text
Tag
{/* Step 3: Pending */}
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag

Journey Timeline Horizontal

Title Description
token
{/* Step 1: Completed */}
check
{/* Step 2: Active */}
check
{/* Step 3: Pending */}
check
{/* Step 4: Pending */}
check
{/* Step 5: Pending */}
check
Date Title Tag

CSS Class Reference

Quickly copy layout and utility classes for Journey Timelines.

{/* Structural Classes */}

Structural Classes

Timeline Card Container journey-timeline-card
Timeline Container ux4g-journey-timeline
Individual Step ux4g-journey-step
Step Icon/Dot Indicator ux4g-journey-indicator
Step Detail Card ux4g-journey-card
Step Information Area ux4g-journey-info
{/* Variant & State Utilities */}

Variant & State Utilities

Vertical Layout ux4g-journey-timeline--vertical
Horizontal Layout ux4g-journey-timeline--horizontal
Completed State ux4g-journey-step-completed
Active State ux4g-journey-step-active
Status Dot Indicator ux4g-journey-status-dot
); export default JourneyTimelineExample2Demo; ``` Angular: ```html
Components

Journey Timeline

A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys.

Implementation Showcase

Visual demonstration of Journey Timeline variations.

Journey Timeline Vertical

Title Description
token
check
Date Title Tag
check
Date
Title Helping Text
Tag
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag

Journey Timeline Horizontal

Title Description
token
check
check
check
check
check
Date Title Tag

CSS Class Reference

Quickly copy layout and utility classes for Journey Timelines.

Structural Classes

Timeline Card Container journey-timeline-card
Timeline Container ux4g-journey-timeline
Individual Step ux4g-journey-step
Step Icon/Dot Indicator ux4g-journey-indicator
Step Detail Card ux4g-journey-card
Step Information Area ux4g-journey-info

Variant & State Utilities

Vertical Layout ux4g-journey-timeline--vertical
Horizontal Layout ux4g-journey-timeline--horizontal
Completed State ux4g-journey-step-completed
Active State ux4g-journey-step-active
Status Dot Indicator ux4g-journey-status-dot
``` ### 3. Vertical Timeline — Vertical Timeline HTML: ```html
Title Description
token
check
Date Title Tag
check
Date
Title Helping Text
Tag
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag
``` React: ```jsx import React from 'react'; const JourneyTimelineExample3Demo = () => ( <> {/* Variant: Vertical Timeline */}
Title Description
token
{/* Step 1: Completed */}
check
Date Title Tag
{/* Step 2: Active */}
check
Date
Title Helping Text
Tag
{/* Step 3: Pending */}
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag
); export default JourneyTimelineExample3Demo; ``` Angular: ```html
Title Description
token
check
Date Title Tag
check
Date
Title Helping Text
Tag
check
Date
Title
2 days remaining Pending
Tag
check
Date
Title
Tag
check
Date
Title
Tag
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.