# Application & Submission / Save & Resume Save draft and resume later pattern with draft status banners, skeleton loading states, and mobile-optimized resume actions. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-save-resume--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-save-resume--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-save-resume--card ## When to use this pattern Use Application & Submission / Save & Resume 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 / Save & Resume. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Draft Status Banner - Landing HTML: ```html

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Draft Banner Landing with Purple BG */}

{/* Draft Status Banner: Desktop */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Draft Status Banner: Mobile (Compact) */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Skeleton Placeholder Content */}

{/* Mobile Bottom Actions (Mobile Only) */}

{/* Footer Branding */}

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

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

``` ### 2. Card — Resume Application Screen HTML: ```html

Continue your application?

Income Certificate · Started 10 Apr 2026

Your progress

Eligibility check Completed

Personal information Completed

Upload documents In progress · 1 of 4 uploaded

Review Not started

Submit Not started

Last saved 10 Apr 2026 at 3:12 PM

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Resume Screen with Purple BG */}

{/* Hero Section */}

Continue your application?

Income Certificate · Started 10 Apr 2026

{/* Your Progress */}

Your progress

{/* Steps List */}

{/* Step 1: Completed */}

done

Eligibility check Completed

{/* Step 2: Completed */}

done

Personal information Completed

{/* Step 3: In Progress */}

Upload documents In progress · 1 of 4 uploaded

{/* Step 4: Not started */}

Review Not started

{/* Step 5: Not started */}

Submit Not started

{/* Last saved note */}

Last saved 10 Apr 2026 at 3:12 PM

{/* Actions */}

{/* Footer Branding */}

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

Continue your application?

Income Certificate · Started 10 Apr 2026

Your progress

Eligibility check Completed

Personal information Completed

Upload documents In progress · 1 of 4 uploaded

Review Not started

Submit Not started

Last saved 10 Apr 2026 at 3:12 PM

``` ### 3. Card — Incomplete Application Resume HTML: ```html

Continue your application?

Some sections have missing information

Your progress

Personal information Completed

Upload documents 1 required document missing

Review Not started

Payment Not started

Last saved 10 Apr 2026 at 3:12 PM

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Incomplete Resume Screen with Purple BG + Card */}

{/* Hero Section */}

Continue your application?

Some sections have missing information

{/* Your Progress */}

Your progress

{/* Steps List */}

{/* Step 1: Completed */}

done

Personal information Completed

{/* Step 2: Warning (incomplete) */}

priority_high

Upload documents 1 required document missing

{/* Step 3: Not started */}

Review Not started

{/* Step 4: Not started */}

Payment Not started

{/* Last saved note */}

Last saved 10 Apr 2026 at 3:12 PM

{/* Actions */}

{/* Footer Branding */}

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

Continue your application?

Some sections have missing information

Your progress

Personal information Completed

Upload documents 1 required document missing

Review Not started

Payment Not started

Last saved 10 Apr 2026 at 3:12 PM

``` ### 4. Card — In-Form Auto-save Confirmation HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: In-Form Autosave with Purple BG + Card */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Auto-save Success Status Bar */}

check_circle Saved 3:14 PM

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

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

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 5. Card — In-Form Draft Expiry Warning HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

Your draft expires in 5 days 16 Apr

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: In-Form Draft Expiry with Purple BG + Card */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Draft Expiry Warning Banner */}

Your draft expires in 5 days 16 Apr

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

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

1
Eligibility
Personal
Documents
4
Submit

Your draft expires in 5 days 16 Apr

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 6. Card — Unsaved Changes Modal HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: In-Form Autosave with Purple BG + Card (background) */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Auto-save Success Status Bar */}

check_circle Saved 3:14 PM

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

{/* Modal Overlay: Unsaved Changes */}

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

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 7. Card — Discard Draft Confirmation Modal HTML: ```html

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Draft Banner Landing with Purple BG + Card (background) */}

{/* Draft Status Banner */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Skeleton Placeholder Content */}

{/* Footer Branding */}

{/* Modal Overlay: Discard Draft */}

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

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

``` ### 8. Full Screen — Draft Status Banner - Landing HTML: ```html

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Body: Draft Banner Landing */}

{/* Draft Status Banner: Desktop */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Draft Status Banner: Mobile (Compact) */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Skeleton Placeholder Content */}

{/* Skeleton Header Area (Desktop Only) */}

{/* Skeleton Content Area (Desktop: grid, Mobile: stacked cards) */}

{/* Skeleton Content Area (Mobile Only: simple stacked cards) */}

{/* Mobile Bottom Actions (Mobile Only) */}

{/* Footer Branding */}

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

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

``` ### 9. Full Screen — Resume Application Screen HTML: ```html

Continue your application?

Income Certificate · Started 10 Apr 2026

Your progress

Eligibility check Completed

Personal information Completed

Upload documents In progress · 1 of 4 uploaded

Review Not started

Submit Not started

Last saved 10 Apr 2026 at 3:12 PM

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Body: Resume Screen */}

{/* Hero Section */}

Continue your application?

Income Certificate · Started 10 Apr 2026

{/* Your Progress */}

Your progress

{/* Steps List */}

{/* Step 1: Completed */}

done

Eligibility check Completed

{/* Step 2: Completed */}

done

Personal information Completed

{/* Step 3: In Progress */}

Upload documents In progress · 1 of 4 uploaded

{/* Step 4: Not started */}

Review Not started

{/* Step 5: Not started */}

Submit Not started

{/* Last saved note */}

Last saved 10 Apr 2026 at 3:12 PM

{/* Actions */}

{/* Footer Branding */}

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

Continue your application?

Income Certificate · Started 10 Apr 2026

Your progress

Eligibility check Completed

Personal information Completed

Upload documents In progress · 1 of 4 uploaded

Review Not started

Submit Not started

Last saved 10 Apr 2026 at 3:12 PM

``` ### 10. Full Screen — Incomplete Application Resume HTML: ```html

Continue your application?

Some sections have missing information

Your progress

Personal information Completed

Upload documents 1 required document missing

Review Not started

Payment Not started

Last saved 10 Apr 2026 at 3:12 PM

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Incomplete Resume Screen */}

{/* Hero Section */}

Continue your application?

Some sections have missing information

{/* Your Progress */}

Your progress

{/* Steps List */}

{/* Step 1: Completed */}

done

Personal information Completed

{/* Step 2: Warning (incomplete) */}

priority_high

Upload documents 1 required document missing

{/* Step 3: Not started */}

Review Not started

{/* Step 4: Not started */}

Payment Not started

{/* Last saved note */}

Last saved 10 Apr 2026 at 3:12 PM

{/* Actions */}

{/* Footer Branding */}

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

Continue your application?

Some sections have missing information

Your progress

Personal information Completed

Upload documents 1 required document missing

Review Not started

Payment Not started

Last saved 10 Apr 2026 at 3:12 PM

``` ### 11. Full Screen — In-Form Auto-save Confirmation HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: In-Form Autosave */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Auto-save Success Status Bar */}

check_circle Saved 3:14 PM

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

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

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 12. Full Screen — In-Form Draft Expiry Warning HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

Your draft expires in 5 days 16 Apr

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: In-Form Draft Expiry */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Draft Expiry Warning Banner */}

Your draft expires in 5 days 16 Apr

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

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

1
Eligibility
Personal
Documents
4
Submit

Your draft expires in 5 days 16 Apr

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 13. Full Screen — Unsaved Changes Modal HTML: ```html

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Form with autosave (background) */}

{/* Horizontal Stepper */}

1
Eligibility
Personal
Documents
4
Submit

{/* Auto-save Success Status Bar */}

check_circle Saved 3:14 PM

{/* Section Heading */}

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

{/* Form Fields */}

Full name

Date of birth

Mobile number

{/* Actions */}

{/* Footer Branding */}

{/* Modal Overlay: Unsaved Changes */}

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

1
Eligibility
Personal
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal information

Provide the personal details below. We will use this to verify your application.

Full name

Date of birth

Mobile number

``` ### 14. Full Screen — Discard Draft Confirmation Modal HTML: ```html

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

search

{/* Mobile Menu */}

{/* Body: Draft Banner Landing (background) */}

{/* Draft Status Banner */}

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

{/* Skeleton Placeholder Content */}

{/* Footer Branding */}

{/* Modal Overlay: Discard Draft */}

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

Income Certificate Application Step 3 of 5 Document Upload

Last saved: 10 Apr 2026

```