# Feedback & Communication / Find Service Centre Locate nearby government service centres with map view and contact details. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-find-service-centre--introduction ## Pattern variants - Find Service Centre: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-find-service-centre--find-service-centre ## When to use this pattern Use Feedback & Communication / Find Service Centre 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 Feedback & Communication / Find Service Centre. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Find Service Centre — Find Service Centre HTML: ```html

UX4G National Services Portal

Find your nearest Service Centre

Locate a Common Service Centre (CSC) near you for in-person help.

CSC Sector 12 — Pune City

45 Patel Nagar, Sector 12, Pune 411001

1.2 km away · Open Mon-Sat 9 AM - 6 PM

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

{/* Logo & Brand */}

UX4G National Services Portal

{/* Right Group: Nav Links + Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Help Centre & Contact Support Section */}

{/* Header */}

Find your nearest Service Centre

Locate a Common Service Centre (CSC) near you for in-person help.

{/* Search Component Integration */}

{/* Nearest Centre Info Box */}

CSC Sector 12 — Pune City

45 Patel Nagar, Sector 12, Pune 411001

1.2 km away · open Mon-Sat 9 AM - 6 PM

{/* Action Buttons */}

{/* Footer Branding */}

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

UX4G National Services Portal

Find your nearest Service Centre

Locate a Common Service Centre (CSC) near you for in-person help.

CSC Sector 12 — Pune City

45 Patel Nagar, Sector 12, Pune 411001

1.2 km away · Open Mon-Sat 9 AM - 6 PM

``` ### 2. Introduction — Introduction HTML: ```html

Patterns

Find Service Centre

Locate nearby government service centres with map view and contact details.

location_on

Find Service Centre

Find nearby service centres with location details, contact info, and operating hours.

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

Patterns

Find Service Centre

Locate nearby government service centres with map view and contact details.

location_on

Find Service Centre

Find nearby service centres with location details, contact info, and operating hours.

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

Patterns

Find Service Centre

Locate nearby government service centres with map view and contact details.

location_on

Find Service Centre

Find nearby service centres with location details, contact info, and operating hours.

```