# Feedback & Communication / Service Completion and Feedback Service completion and user feedback patterns for government services. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-service-completion-and-feedback--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-service-completion-and-feedback--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-service-completion-and-feedback--card ## When to use this pattern Use Feedback & Communication / Service Completion and Feedback 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 / Service Completion and Feedback. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Service Completed HTML: ```html

UX4G National Services Portal

arrow_back Back

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

income_certificate_2026.pdf 28 KB · PDF

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

{/* Feedback Communication Completion Section */}

{/* Back Link */}

arrow_back Back

{/* Form Header */}

Service Completed

Your income certificate has been downloaded.

{/* Success Message Block */}

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

{/* Gray Document Info Badge */}

income_certificate_2026.pdf 28 KB · PDF

{/* Action Buttons */}

{/* Footer Branding */}

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

UX4G National Services Portal

arrow_back Back

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

income_certificate_2026.pdf 28 KB · PDF

``` ### 2. Card — Rate your experience HTML: ```html

UX4G National Services Portal

Rate your experience

star star star star star

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

Rate your experience

star star star star star

{/* Footer Branding */}

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

UX4G National Services Portal

Rate your experience

star star star star star

``` ### 3. Card — Rate your experience HTML: ```html

UX4G National Services Portal

Rate your experience

star star star star star

What can we improve?

0 / 200

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

Rate your experience

star star star star star

What can we improve?

0 / 200

{/* Footer Branding */}

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

UX4G National Services Portal

Rate your experience

star star star star star

What can we improve?

0 / 200

``` ### 4. Card — Feedback submitted HTML: ```html

UX4G National Services Portal

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

{/* Footer Branding */}

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

UX4G National Services Portal

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

``` ### 5. Full Screen — Service Completed HTML: ```html

UX4G National Services Portal

arrow_back Back

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

income_certificate_2026.pdf 28 KB · PDF

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

{/* Feedback Communication Completion Section */}

{/* Back Link */}

arrow_back Back

{/* Form Header */}

Service Completed

Your income certificate has been downloaded.

{/* Success Message Block */}

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

{/* Gray Document Info Badge */}

income_certificate_2026.pdf 28 KB · PDF

{/* Action Buttons */}

{/* Footer Branding */}

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

UX4G National Services Portal

arrow_back Back

check_circle

Income Certificate Downloaded. Your certificate has been saved to your device. View

income_certificate_2026.pdf 28 KB · PDF

``` ### 6. Full Screen — Rate your experience HTML: ```html

UX4G National Services Portal

Rate your experience

star star star star star

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

Rate your experience

star star star star star

{/* Footer Branding */}

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

UX4G National Services Portal

Rate your experience

star star star star star

``` ### 7. Full Screen — Rate your experience HTML: ```html

UX4G National Services Portal

Rate your experience

star star star star star

What can we improve?

0 / 200

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

Rate your experience

star star star star star

What can we improve?

0 / 200

{/* Footer Branding */}

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

UX4G National Services Portal

Rate your experience

star star star star star

What can we improve?

0 / 200

``` ### 8. Full Screen — Feedback submitted HTML: ```html

UX4G National Services Portal

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

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

{/* Logo & Brand */}

UX4G National Services Portal

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

{/* Navigation Links */}

{/* Actions */}

search

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

{/* Footer Branding */}

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

UX4G National Services Portal

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

```