# Search & Discovery / Consultation Slot Booking Browse and filter advocates with consultation fees, experience, languages, and bookable slots. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-consultation-slot-booking--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-consultation-slot-booking--full-screen - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-consultation-slot-booking--column - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-consultation-slot-booking--card ## When to use this pattern Use Search & Discovery / Consultation Slot Booking 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 / Consultation Slot Booking. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Consultation Slot Booking - Full Page HTML: ```html

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

``` React: ```jsx import React from 'react'; const SearchDiscoveryConsultationSlotBookingExample1Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

{/* Advocates Stack */}

{/* Adv. M. Sharma Card */}

gavel

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

{/* Adv. R. Iyer Card */}

gavel

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

{/* Adv. P. Nair Card */}

gavel

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

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

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

``` ### 2. Column — Consultation Slot Booking - Full Page HTML: ```html

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

``` React: ```jsx import React from 'react'; const SearchDiscoveryConsultationSlotBookingExample2Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

{/* Advocates Stack */}

{/* Adv. M. Sharma Card */}

gavel

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

{/* Adv. R. Iyer Card */}

gavel

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

{/* Adv. P. Nair Card */}

gavel

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

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

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

``` ### 3. Full Screen — Consultation Slot Booking - Full Page HTML: ```html

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

``` React: ```jsx import React from 'react'; const SearchDiscoveryConsultationSlotBookingExample3Demo = () => ( <>

{/* Breadcrumbs */}

{/* Header */}

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

{/* Advocates Stack */}

{/* Adv. M. Sharma Card */}

gavel

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

{/* Adv. R. Iyer Card */}

gavel

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

{/* Adv. P. Nair Card */}

gavel

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

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

Select an advocate

District Legal Services Authority, Pune · 12 advocates available

Adv. M. Sharma

8 slots

Family Law · 12 yrs experience

Languages: Hindi, Marathi, English

Adv. R. Iyer

5 slots

Civil & Property Law · 18 yrs experience

Languages: English, Marathi, Tamil

Adv. P. Nair

3 slots

Labour & Employment Law · 9 yrs experience

Languages: Hindi, Malayalam, English

```