# Feedback & Communication / FAQ Article FAQ article page with breadcrumb navigation and accordion-style answers. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-faq-article--introduction ## Pattern variants - FAQ Article: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-faq-article--faq-article ## When to use this pattern Use Feedback & Communication / FAQ Article 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 / FAQ Article. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Faq Article — FAQ Article HTML: ```html

How do I track my application?

Sign in to the portal, open My Applications, and tap your active application. The Status Tracker shows every milestone — Submitted, Documents Verified, Under Review, Decision. SLA timer shows expected completion date.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi. Sed tempor luctus sem, vitae feugiat magna aliquet at. Mauris suscipit ligula sed est condimentum, at ullamcorper nunc dapibus. Vivamus non tortor id mauris commodo volutpat. Morbi in egestas justo, quis volutpat urna. Curabitur tincidunt, arcu vitae volutpat blandit, nibh justo tempor nisl, id pretium mauris lacus vel nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse id massa lorem. Integer hendrerit, sem et accumsan posuere, elit urna hendrerit ipsum, ut feugiat dui augue non dui. Nunc eleifend nibh id orci congue, non posuere orci tempor. In sit amet fermentum justo.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationFAQArticleExample1Demo = () => ( <>

How do I track my application?

Sign in to the portal, open My Applications, and tap your active application. The Status Tracker shows every milestone — Submitted, Documents Verified, Under Review, Decision. SLA timer shows expected completion date.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi. Sed tempor luctus sem, vitae feugiat magna aliquet at. Mauris suscipit ligula sed est condimentum, at ullamcorper nunc dapibus. Vivamus non tortor id mauris commodo volutpat. Morbi in egestas justo, quis volutpat urna. Curabitur tincidunt, arcu vitae volutpat blandit, nibh justo tempor nisl, id pretium mauris lacus vel nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse id massa lorem. Integer hendrerit, sem et accumsan posuere, elit urna hendrerit ipsum, ut feugiat dui augue non dui. Nunc eleifend nibh id orci congue, non posuere orci tempor. In sit amet fermentum justo.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Powered by -
); export default FeedbackCommunicationFAQArticleExample1Demo; ``` Angular: ```html

How do I track my application?

Sign in to the portal, open My Applications, and tap your active application. The Status Tracker shows every milestone — Submitted, Documents Verified, Under Review, Decision. SLA timer shows expected completion date.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi. Sed tempor luctus sem, vitae feugiat magna aliquet at. Mauris suscipit ligula sed est condimentum, at ullamcorper nunc dapibus. Vivamus non tortor id mauris commodo volutpat. Morbi in egestas justo, quis volutpat urna. Curabitur tincidunt, arcu vitae volutpat blandit, nibh justo tempor nisl, id pretium mauris lacus vel nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse id massa lorem. Integer hendrerit, sem et accumsan posuere, elit urna hendrerit ipsum, ut feugiat dui augue non dui. Nunc eleifend nibh id orci congue, non posuere orci tempor. In sit amet fermentum justo.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec congue lorem et mi pharetra, vitae condimentum risus dictum. Phasellus at justo malesuada, varius tortor non, commodo mauris. Duis pellentesque elementum elit, eu ultricies nisl sagittis in. Aliquam sed dolor a mi suscipit vulputate. Nunc volutpat mattis purus, vitae varius nibh tristique sit amet. Proin rutrum risus ac lacinia gravida. Integer sagittis, lorem non fringilla feugiat, nisl neque sodales massa, quis cursus lectus dui a justo. Quisque vitae nisi et ante pulvinar consequat. Sed congue accumsan orci, nec vestibulum neque. Curabitur luctus sem ut erat faucibus, non malesuada augue convallis. Duis efficitur, lectus eu iaculis ullamcorper, nulla velit dictum lacus, vitae tincidunt purus est vitae nisl. Etiam feugiat sapien non nibh dictum vitae vulputate erat posuere, sed pretium augue ultrices in semper, nibh justo magna.

Powered by -
``` ### 2. Introduction — Introduction HTML: ```html
Patterns

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

quiz

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

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

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

quiz

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

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

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

quiz

FAQ Article

FAQ article page with breadcrumb navigation and accordion-style answers.

```