# Result List A Result List Row displays a single item within a list of search results, records, or data entries. It presents key information in a structured format, enabling users to quickly scan, compare, and access relevant details or actions. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--introduction ## Variants documented in Storybook - Application (v1): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--application-v1 - Documents (v2): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--documents-v2 - Service (v3): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--service-v3 - Grievance (v4): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--grievance-v4 - Payment (v5): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--payment-v5 ## 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 Result List. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Application — Application Result List HTML: ```html

Result list row

Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
``` React: ```jsx import React from 'react'; const ResultListExample1Demo = () => ( <> {/* Variant: Application Result List */}

Result list row

{/* Header */}
{/* Icon Placeholder */}
{/* Titles */}
Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
{/* Expanded Content */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
); export default ResultListExample1Demo; ``` Angular: ```html

Result list row

Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward
``` ### 2. Documents — Documents Result List HTML: ```html

Result list row - Variation 2

picture_as_pdf

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const ResultListExample2Demo = () => ( <> {/* Variant: Documents Result List */}

Result list row - Variation 2

{/* Header */}
{/* PDF Icon */}
picture_as_pdf
{/* Titles */}

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
{/* Expanded Content */}
{/* Mobile Specific Grid Items */}
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents (Full width on desktop, regular on mobile) */}
Documents ID Proof, Address Proof
); export default ResultListExample2Demo; ``` Angular: ```html

Result list row - Variation 2

picture_as_pdf

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` ### 3. Grievance — Grievance Result List HTML: ```html

Result list row - Variation 4

GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
Reference Number GRV-2026-04127
SLA Status 3 days overdue
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const ResultListExample3Demo = () => ( <> {/* Variant: Grievance Result List */}

Result list row - Variation 4

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}
GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
{/* Expanded Content */}
{/* Mobile Specific (Reference & SLA) */}
Reference Number GRV-2026-04127
SLA Status 3 days overdue
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof
); export default ResultListExample3Demo; ``` Angular: ```html

Result list row - Variation 4

GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
Reference Number GRV-2026-04127
SLA Status 3 days overdue
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` ### 4. Introduction — Introduction HTML: ```html
Components

Result List

A Result List Row displays a single item within a list of search results, records, or data entries. It presents key information in a structured format, enabling users to quickly scan, compare, and access relevant details or actions.

Implementation Showcase

Visual demonstration of Result List variations.

Application Variant (v1)

Result list row

Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward

Documents Variant (v2)

Result list row - Variation 2

picture_as_pdf

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Service Variant (v3)

Result list row - Variation 3

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Grievance Variant (v4)

Result list row - Variation 4

GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
Reference Number GRV-2026-04127
SLA Status 3 days overdue
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Payment Variant (v5)

Result list row - Variation 5

TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
Amount paid ₹400/-
Paid on 12 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

CSS Class Reference

Quickly copy layout and utility classes for Result Lists.

Structural Classes

Main Container ux4g-result-list
Header Area ux4g-result-list-header
Information Area ux4g-result-list-info
Icon Placeholder ux4g-result-list-icon
Title Container ux4g-result-list-title-group
Main Title ux4g-result-list-title
Expandable Content Area ux4g-result-list-content
Details Grid ux4g-result-list-details
Grid Item ux4g-result-list-detail-item

Variant & Element Classes

Application Variant ux4g-result-list-v1
Documents Variant ux4g-result-list-v2
Service Variant ux4g-result-list-v3
Grievance Variant ux4g-result-list-v4
Payment Variant ux4g-result-list-v5
Action Buttons Container ux4g-result-list-actions
Expand/Collapse Toggle ux4g-result-list-accordion-toggle
Detail Label Text ux4g-result-list-detail-label
Detail Value Text ux4g-result-list-detail-value
``` React: ```jsx import React from 'react'; const ResultListExample4Demo = () => ( <>
Components

Result List

A Result List Row displays a single item within a list of search results, records, or data entries. It presents key information in a structured format, enabling users to quickly scan, compare, and access relevant details or actions.

Implementation Showcase

Visual demonstration of Result List variations.

Application Variant (v1)

Result list row

{/* Header */}
{/* Icon Placeholder */}
{/* Titles */}
Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
{/* Expanded Content */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof

Documents Variant (v2)

Result list row - Variation 2

{/* Header */}
{/* PDF Icon */}
picture_as_pdf
{/* Titles */}

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
{/* Expanded Content */}
{/* Mobile Specific Grid Items */}
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents (Full width on desktop, regular on mobile) */}
Documents ID Proof, Address Proof

Service Variant (v3)

Result list row - Variation 3

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
{/* Expanded Content */}
{/* Mobile Specific Grid Items */}
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof

Grievance Variant (v4)

Result list row - Variation 4

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}
GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
{/* Expanded Content */}
{/* Mobile Specific (Reference & SLA) */}
Reference Number GRV-2026-04127
SLA Status 3 days overdue
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof

Payment Variant (v5)

Result list row - Variation 5

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}
TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
{/* Expanded Content */}
{/* Mobile Specific (Amount & Paid Date) */}
Amount paid ₹400/-
Paid on 12 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof

CSS Class Reference

Quickly copy layout and utility classes for Result Lists.

{/* Structural Classes */}

Structural Classes

Main Container ux4g-result-list
Header Area ux4g-result-list-header
Information Area ux4g-result-list-info
Icon Placeholder ux4g-result-list-icon
Title Container ux4g-result-list-title-group
Main Title ux4g-result-list-title
Expandable Content Area ux4g-result-list-content
Details Grid ux4g-result-list-details
Grid Item ux4g-result-list-detail-item
{/* Variant & Element Classes */}

Variant & Element Classes

Application Variant ux4g-result-list-v1
Documents Variant ux4g-result-list-v2
Service Variant ux4g-result-list-v3
Grievance Variant ux4g-result-list-v4
Payment Variant ux4g-result-list-v5
Action Buttons Container ux4g-result-list-actions
Expand/Collapse Toggle ux4g-result-list-accordion-toggle
Detail Label Text ux4g-result-list-detail-label
Detail Value Text ux4g-result-list-detail-value
); export default ResultListExample4Demo; ``` Angular: ```html
Components

Result List

A Result List Row displays a single item within a list of search results, records, or data entries. It presents key information in a structured format, enabling users to quickly scan, compare, and access relevant details or actions.

Implementation Showcase

Visual demonstration of Result List variations.

Application Variant (v1)

Result list row

Reference Number INC-2026-MH-04127 Department Revenue Department

Income Certificate

8 days left Under review Last Updated Date Last updated: 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Documents ID Proof, Address Proof
Escalation Register grievance arrow_forward

Documents Variant (v2)

Result list row - Variation 2

picture_as_pdf

Income Certificate

check Issued
Revenue Department
Issued: 05 Mar 2026
Valid till: 05 Mar 2027
Issued 05 Apr 2026
Valid till 05 Apr 2027
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Service Variant (v3)

Result list row - Variation 3

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Grievance Variant (v4)

Result list row - Variation 4

GRV-2026-04127

Income Certificate

Escalated
3 days overdue Under review
priority_high
Reference Number GRV-2026-04127
SLA Status 3 days overdue
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

Payment Variant (v5)

Result list row - Variation 5

TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
Amount paid ₹400/-
Paid on 12 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof

CSS Class Reference

Quickly copy layout and utility classes for Result Lists.

Structural Classes

Main Container ux4g-result-list
Header Area ux4g-result-list-header
Information Area ux4g-result-list-info
Icon Placeholder ux4g-result-list-icon
Title Container ux4g-result-list-title-group
Main Title ux4g-result-list-title
Expandable Content Area ux4g-result-list-content
Details Grid ux4g-result-list-details
Grid Item ux4g-result-list-detail-item

Variant & Element Classes

Application Variant ux4g-result-list-v1
Documents Variant ux4g-result-list-v2
Service Variant ux4g-result-list-v3
Grievance Variant ux4g-result-list-v4
Payment Variant ux4g-result-list-v5
Action Buttons Container ux4g-result-list-actions
Expand/Collapse Toggle ux4g-result-list-accordion-toggle
Detail Label Text ux4g-result-list-detail-label
Detail Value Text ux4g-result-list-detail-value
``` ### 5. Payment — Payment Result List HTML: ```html

Result list row - Variation 5

TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
Amount paid ₹400/-
Paid on 12 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const ResultListExample5Demo = () => ( <> {/* Variant: Payment Result List */}

Result list row - Variation 5

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}
TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
{/* Expanded Content */}
{/* Mobile Specific (Amount & Paid Date) */}
Amount paid ₹400/-
Paid on 12 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof
); export default ResultListExample5Demo; ``` Angular: ```html

Result list row - Variation 5

TXN2026041200823

Income Certificate

₹400/- Paid
12 Apr 2026
Amount paid ₹400/-
Paid on 12 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` ### 6. Service — Service Result List HTML: ```html

Result list row - Variation 3

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` React: ```jsx import React from 'react'; const ResultListExample6Demo = () => ( <> {/* Variant: Service Result List */}

Result list row - Variation 3

{/* Header */}
{/* Placeholder Icon */}
{/* Titles */}

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
{/* Expanded Content */}
{/* Mobile Specific Grid Items */}
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
{/* Common & Desktop Specific Grid Items */}
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
{/* Mobile Specific Department */}
Department Revenue Department
{/* Documents */}
Documents ID Proof, Address Proof
); export default ResultListExample6Demo; ``` Angular: ```html

Result list row - Variation 3

Income Certificate

Revenue Department
Paid
₹ 120/-
schedule 20 mins
Reference Number INC-2026-MH-04127
Last Updated Date 10 Apr 2026
Submitted Date 1 Apr 2026
Assigned Officer Rahul Sharma
Next Step Verification
Department Revenue Department
Documents ID Proof, Address Proof
``` ## 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.