`, `.hs-container`, `.hs-auth`, then `.hs-auth__card` and an optional `p.hs-auth__alt`. The band is white. - On an account page the card heading is the page `h1` with the size class `hs-heading--h2`. The template prints no page head. Write the heading as the task: “Reset your password”, “Change email”. - Where the page already has an `h1` (a dialog, a band on a member page), the card heading is an `h2` with the same class, and the eyebrow may name the area (“Account”). - Put no `hs-heading--rule` on the card heading. - Card order: head, an optional notice or form alert, the form, then `.hs-form-divider` and `.hs-form-note`. The form ends with one `.hs-button.hs-button--block`. - Give every route in and under the card `.hs-form-link`. Put “Forgot your password?” in the password field’s hint slot. - Use `.hs-auth__alt` for one secondary route only, such as “New to Honor Society? Join now”. It never holds a button. - Signed-in notice: a `.hs-callout.hs-callout--info` right under the head. Its title names the account in `span.hs-auth__account` (“You are signed in as …”); its text holds the `Sign out` link, which returns to the same page. - Give every field its `autocomplete`: `username` on the sign-in email, `email` on any other email field, `current-password` and `new-password` on passwords. Email fields take `type="email"`. ## Accessibility - Contrast on white: heading navy 12.4:1, intro slate 6.2:1, card border line (decorative; the fields carry their own 3.7:1 borders). - One `h1` per page. The card and the band name the same thing: label the band with `aria-labelledby` the heading `id`. - The card works without JavaScript. `password.js` only shows the eye toggle; without it the password field is a plain password input. - At 320px the card is 296px wide with 20px padding; a long email address in the intro or a notice breaks anywhere (`overflow-wrap: anywhere`). - After a failed submit, put the [form alert](/components/form/) under the head and move focus to it. - The column needs no motion. ## Variants ### Sign-in card The full card on the white band, with the copy for `/user/login`. Type a password and press the eye to show it. ```html

Welcome back. Sign in to your account.

Need help signing in? Visit our Help Center or contact Honor Society support.

New to Honor Society? Join now

``` ### Heading block with an eyebrow and an H2 The card inside a page that already has its `h1`. The eyebrow names the area; the heading is an `h2` at the same size. ```html

Account

Change email

Your email address is avery.example@example.com. It is also how you sign in.

``` ### Signed-in notice A signed-in member on `/user/password`. The info callout names the account and offers `Sign out`; the form sends the link to that address. ```html

Reset your password

We will email you a link to set a new password. The link works once.

```