# Identity & Access / Reset Password Reset Password patterns. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-reset-password--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-reset-password--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-reset-password--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-identity-access-reset-password--card ## When to use this pattern Use Identity & Access / Reset Password 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 Identity & Access / Reset Password. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Card HTML: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessResetPasswordExample1Demo = () => ( <>
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

+91
OR
error_outline
Most services use OTP login so you may not need a password.
{/* Footer Branding */}
Powered by - Digital India
); export default IdentityAccessResetPasswordExample1Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 2. Column — Column HTML: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessResetPasswordExample2Demo = () => ( <>
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

+91
OR
error_outline
Most services use OTP login so you may not need a password.
{/* Footer Branding */}
Powered by - Digital India
); export default IdentityAccessResetPasswordExample2Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` ### 3. Full Screen — Full Screen HTML: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
``` React: ```jsx import React from 'react'; const IdentityAccessResetPasswordExample3Demo = () => ( <>
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

+91
OR
error_outline
Most services use OTP login so you may not need a password.
{/* Footer Branding */}
Powered by - Digital India
); export default IdentityAccessResetPasswordExample3Demo; ``` Angular: ```html
arrow_back Back to Sign in

Reset Password

Enter your registered mobile number to receive a verification code

Powered by -
```