# Application & Submission / Submission Acknowledgement Success and acknowledgement screens with reference numbers, next-steps timeline, notification confirmations, and action buttons. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-submission-acknowledgement--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-submission-acknowledgement--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-submission-acknowledgement--card ## When to use this pattern Use Application & Submission / Submission Acknowledgement 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 Application & Submission / Submission Acknowledgement. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Application Submitted Successfully HTML: ```html

Return to services

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

Application Reference

INC-2026-MH-04127

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

SMS sent to +91 98765 •••••

Email sent to r••••@gmail.com

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

{/* Accessibility Bar */}

Title Description

search

{/* Body: Submission Acknowledgement Success with Purple BG + Card */}

{/* Back link */} arrow_back Return to services {/* Hero: Success */}

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

{/* Reference Card */}

Application Reference

INC-2026-MH-04127

{/* What happens next */}

What happens next

{/* Vertical Stepper with Info Cards */}

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

{/* Notification info */}

phone_iphone SMS sent to +91 98765 •••••

mail Email sent to r••••@gmail.com

{/* Actions */}

{/* Footer Branding */}

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

Return to services

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

Application Reference

INC-2026-MH-04127

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

SMS sent to +91 98765 •••••

Email sent to r••••@gmail.com

``` ### 2. Card — Submission Error - Retry HTML: ```html

Return to services

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Could not submit

Network or server issue

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

{/* Accessibility Bar */}

Title Description

search

{/* Body: Submission Error with Purple BG + Card */}

{/* Back link */} arrow_back Return to services {/* Hero: Error */}

error

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

{/* What happens next */}

What happens next

{/* Vertical Stepper with Info Cards */}

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

{/* Actions */}

{/* Context Alert: Could not submit */}

error Could not submit

Network or server issue

{/* Footer Branding */}

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

Return to services

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Could not submit

Network or server issue

``` ### 3. Full Screen — Application Submitted Successfully HTML: ```html

Return to services

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

Application Reference

INC-2026-MH-04127

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

SMS sent to +91 98765 •••••

Email sent to r••••@gmail.com

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

{/* Accessibility Bar */}

Title Description

search

{/* Body: Submission Acknowledgement Success */}

{/* Back link */} arrow_back Return to services {/* Hero: Success */}

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

{/* Reference Card */}

Application Reference

INC-2026-MH-04127

{/* What happens next */}

What happens next

{/* Vertical Stepper with Info Cards */}

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

{/* Notification info */}

phone_iphone SMS sent to +91 98765 •••••

mail Email sent to r••••@gmail.com

{/* Actions */}

{/* Footer Branding */}

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

Return to services

done

Application Submitted Successfully

Your Income Certificate application is now under review by the Revenue Department.

Application Reference

INC-2026-MH-04127

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

SMS sent to +91 98765 •••••

Email sent to r••••@gmail.com

``` ### 4. Full Screen — Application Queued for Processing HTML: ```html

Return to services

Application Queued

We'll submit your application automatically when your connection is restored. Your data is saved.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Application queued

Will submit when connection is restored.

Understood

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

{/* Accessibility Bar */}

Title Description

search

{/* Body: Submission Acknowledgement Queued */}

{/* Back link */} arrow_back Return to services {/* Hero: Queued */}

hourglass_bottom

Application Queued

We'll submit your application automatically when your connection is restored. Your data is saved.

{/* What happens next */}

What happens next

{/* Vertical Stepper with Info Cards */}

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

{/* Actions */}

{/* Context Alert: Application queued */}

warning Application queued

Will submit when connection is restored.

Understood

{/* Footer Branding */}

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

Return to services

Application Queued

We'll submit your application automatically when your connection is restored. Your data is saved.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Application queued

Will submit when connection is restored.

Understood

``` ### 5. Full Screen — Submission Error - Retry HTML: ```html

Return to services

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Could not submit

Network or server issue

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

{/* Accessibility Bar */}

Title Description

search

{/* Body: Submission Error */}

{/* Back link */} arrow_back Return to services {/* Hero: Error */}

error

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

{/* What happens next */}

What happens next

{/* Vertical Stepper with Info Cards */}

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

{/* Actions */}

{/* Context Alert: Could not submit */}

error Could not submit

Network or server issue

{/* Footer Branding */}

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

Return to services

Could Not Submit Application

We could not submit your application due to a network or server error. Your data is saved — try again.

What happens next

1

Document verification 3-5 working days
2

Field inspection (if required) Inspector will contact you
3

Certificate issued Within 30 days · Legal SLA

Could not submit

Network or server issue

```