# Search & Discovery / Search No Results Empty state for search with no matching results, offering suggestions and alternative paths. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-no-results--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-no-results--full-screen - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-no-results--column - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-no-results--desktop-workspace ## When to use this pattern Use Search & Discovery / Search No Results 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 / Search No Results. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Column — Search No Results - Full Page HTML: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchNoResultsExample1Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

{/* Main Content Area */}
{/* Popular Services Section */}

Popular services

{/* 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
); export default SearchDiscoverySearchNoResultsExample1Demo; ``` Angular: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
``` ### 2. Desktop Workspace — Search No Results - Full Page HTML: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchNoResultsExample2Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

{/* Main Content Area */}
{/* Popular Services Section */}

Popular services

{/* 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
); export default SearchDiscoverySearchNoResultsExample2Demo; ``` Angular: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
``` ### 3. Full Screen — Search No Results - Full Page HTML: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchNoResultsExample3Demo = () => ( <>
{/* Top Search Section with Lavender/Primary background on mobile, styled responsively */}
{/* Search Input Bar */}
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

{/* Main Content Area */}
{/* Popular Services Section */}

Popular services

{/* 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
); export default SearchDiscoverySearchNoResultsExample3Demo; ``` Angular: ```html
search
  • Searching for ' income '
  • manage_search Income Certificate Revenue Dept
  • manage_search Income Tax Return... Income Tax Dept
  • manage_search Low Income Group... Social Welfare
  • manage_search Income & Asset Cer... Revenue Dept
search

No results found

Did you mean:

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
```