# Search & Discovery / Global Service Discovery Cross-departmental service discovery with category cards, featured services, recommendations, and an interactive quiz. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-global-service-discovery--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-global-service-discovery--full-screen - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-global-service-discovery--desktop-workspace - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-global-service-discovery--column ## When to use this pattern Use Search & Discovery / Global Service Discovery when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## 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 Search & Discovery / Global Service Discovery. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Column — Global Service Discovery - Full Page HTML: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

``` React: ```jsx import React from 'react'; const SearchDiscoveryGlobalServiceDiscoveryExample1Demo = () => ( <>
{/* Title using standard typescale utilities */}

Find any government service

{/* Subtitle using standard typescale and semantic text colors */}

Search 3,000+ services, schemes and certificates

{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Category Browse Section matching mockup */}
{/* Title */}

Browse by category

{/* Grid of Cards (2 rows of 4 columns on large devices, responsive) */}
{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Education */}
school

Education

31 services

{/* Card 3: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Featured Scheme Section matching mockup */}
{/* Left Content Column */}
FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

{/* Right Graphic Column */}
{/* Popular Services Section */}
{/* Title */}

Popular services

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 4 columns on desktop) */}
{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
{/* Recommended Section */}
{/* Title & Subtitle */}

Recommended for Ramesh Kumar

Based on your profile, location and category

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 3 columns on desktop) */}
{/* Card 1: PM Kisan Samman Nidhi */}

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr
{/* Card 2: Ayushman Bharat (PM-JAY) */}

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover
{/* Card 3: National Pension Scheme */}

National Pension Scheme

Finance Ministry

Free · Tax benefit
{/* Quiz Section */}

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

); export default SearchDiscoveryGlobalServiceDiscoveryExample1Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

``` ### 2. Desktop Workspace — Global Service Discovery - Full Page HTML: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

``` React: ```jsx import React from 'react'; const SearchDiscoveryGlobalServiceDiscoveryExample2Demo = () => ( <>
{/* Title using standard typescale utilities */}

Find any government service

{/* Subtitle using standard typescale and semantic text colors */}

Search 3,000+ services, schemes and certificates

{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Category Browse Section matching mockup */}
{/* Title */}

Browse by category

{/* Grid of Cards (2 rows of 4 columns on large devices, responsive) */}
{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Education */}
school

Education

31 services

{/* Card 3: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Featured Scheme Section matching mockup */}
{/* Left Content Column */}
FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

{/* Right Graphic Column */}
{/* Popular Services Section */}
{/* Title */}

Popular services

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 4 columns on desktop) */}
{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
{/* Recommended Section */}
{/* Title & Subtitle */}

Recommended for Ramesh Kumar

Based on your profile, location and category

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 3 columns on desktop) */}
{/* Card 1: PM Kisan Samman Nidhi */}

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr
{/* Card 2: Ayushman Bharat (PM-JAY) */}

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover
{/* Card 3: National Pension Scheme */}

National Pension Scheme

Finance Ministry

Free · Tax benefit
{/* Quiz Section */}

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

); export default SearchDiscoveryGlobalServiceDiscoveryExample2Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

``` ### 3. Full Screen — Global Service Discovery - Full Page HTML: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

``` React: ```jsx import React from 'react'; const SearchDiscoveryGlobalServiceDiscoveryExample3Demo = () => ( <>
{/* Title using standard typescale utilities */}

Find any government service

{/* Subtitle using standard typescale and semantic text colors */}

Search 3,000+ services, schemes and certificates

{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Category Browse Section matching mockup */}
{/* Title */}

Browse by category

{/* Grid of Cards (2 rows of 4 columns on large devices, responsive) */}
{/* Card 1: Health */}
local_hospital

Health

24 services

{/* Card 2: Education */}
school

Education

31 services

{/* Card 3: Agriculture */}
agriculture

Agriculture

18 services

{/* Card 4: Land Records */}
terrain

Land Records

12 services

{/* Card 5: Transport */}
directions_bus

Transport

15 services

{/* Card 6: Social Welfare */}
volunteer_activism

Social Welfare

27 services

{/* Card 7: Utilities */}
bolt

Utilities

9 services

{/* Card 8: Finance */}
account_balance

Finance

21 services

{/* Featured Scheme Section matching mockup */}
{/* Left Content Column */}
FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

{/* Right Graphic Column */}
{/* Popular Services Section */}
{/* Title */}

Popular services

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 4 columns on desktop) */}
{/* Card 1: Income Certificate */}

Income Certificate

Revenue Department

Free · 20 mins
{/* Card 2: Caste Certificate */}

Caste Certificate

Social Welfare Dept

Free · 15 mins
{/* Card 3: Driving Licence */}

Driving Licence

Transport Department

₹200 · 30 days
{/* Card 4: PAN Card */}

PAN Card

Income Tax Dept

₹107 · 15 days
{/* Recommended Section */}
{/* Title & Subtitle */}

Recommended for Ramesh Kumar

Based on your profile, location and category

{/* Grid of Cards (1 column on mobile, 2 columns on tablet, 3 columns on desktop) */}
{/* Card 1: PM Kisan Samman Nidhi */}

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr
{/* Card 2: Ayushman Bharat (PM-JAY) */}

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover
{/* Card 3: National Pension Scheme */}

National Pension Scheme

Finance Ministry

Free · Tax benefit
{/* Quiz Section */}

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

); export default SearchDiscoveryGlobalServiceDiscoveryExample3Demo; ``` Angular: ```html

Find any government service

Search 3,000+ services, schemes and certificates

search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Browse by category

local_hospital

Health

24 services

school

Education

31 services

agriculture

Agriculture

18 services

terrain

Land Records

12 services

directions_bus

Transport

15 services

volunteer_activism

Social Welfare

27 services

bolt

Utilities

9 services

account_balance

Finance

21 services

FEATURED SCHEME

PM Awas Yojana (Urban)

Subsidised housing loans for eligible families — interest subsidy up to ₹2.67 lakh.

Popular services

Income Certificate

Revenue Department

Free · 20 mins

Caste Certificate

Social Welfare Dept

Free · 15 mins

Driving Licence

Transport Department

₹200 · 30 days

PAN Card

Income Tax Dept

₹107 · 15 days

Recommended for Ramesh Kumar

Based on your profile, location and category

PM Kisan Samman Nidhi

Agriculture Department

Free · ₹6,000/yr

Ayushman Bharat (PM-JAY)

Health & Family Welfare

Free · ₹5L cover

National Pension Scheme

Finance Ministry

Free · Tax benefit

Not sure what you're eligible for?

Take a 2-minute quiz and we'll find the schemes you qualify for.

```