# Feedback & Communication / Note to Citizen Officer note display pattern with alert banner and action button **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-note-to-citizen--introduction ## Pattern variants - Note to Citizen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-note-to-citizen--note-to-citizen ## When to use this pattern Use Feedback & Communication / Note to Citizen 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 / Note to Citizen. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Note to Citizen

Officer note display pattern with alert banner and action button

notifications

Note to Citizen

Officer note displayed as a warning alert with timestamp, detailed message, and resubmit action button.

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

Note to Citizen

Officer note display pattern with alert banner and action button

notifications

Note to Citizen

Officer note displayed as a warning alert with timestamp, detailed message, and resubmit action button.

); export default FeedbackCommunicationNoteToCitizenExample1Demo; ``` Angular: ```html
Patterns

Note to Citizen

Officer note display pattern with alert banner and action button

notifications

Note to Citizen

Officer note displayed as a warning alert with timestamp, detailed message, and resubmit action button.

``` ### 2. Note To Citizen — Note to Citizen - Officer Alert HTML: ```html
arrow_back Back

Note to Citizen

A note written by a reviewing officer.

error
Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
``` React: ```jsx import React from 'react'; const FeedbackCommunicationNoteToCitizenExample2Demo = () => ( <>
arrow_back Back

Note to Citizen

A note written by a reviewing officer.

error
Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
); export default FeedbackCommunicationNoteToCitizenExample2Demo; ``` Angular: ```html
arrow_back Back

Note to Citizen

A note written by a reviewing officer.

error
Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
```