# Form link, divider and support note > The quiet routes around a form, the hairline under it and the one line that says where to get help. - Block class: `.hs-form-note` - CSS: `components/form.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-4.html - Variants: Support note under a divider, Form link in the hint slot - HTML page: https://brand.honorsociety.org/components/form-note/ ## What it is Three small parts that sit around a form. `.hs-form-link` is a quiet route: navy 600 with a 1px line-strong underline that turns navy on hover. `.hs-form-divider` is a 1px line hairline. `.hs-form-note` is a 16px slate note for help with this form: the ink lead-in question on its own line, the answer on the next. ## When to use - A route next to a form that is not its submit: “Forgot your password?”, “Sign out”, “Join now”, “Back to sign in”. - The help line at the foot of an account form: “Need help signing in? Visit our Help Center or contact Honor Society support.” - A hairline between a form and that help line, inside an [Auth card](/components/auth-card/) or a dialog. ## When not to use - The second route next to a button in a band: use a [Text link](/components/link/) in `.hs-actions`. - A list of two or more routes with no form: use a [Link list](/components/link-list/). - A link inside a paragraph of page copy: write a plain `` in [Prose](/components/prose/). - A note the reader must act on before submitting: use a [Callout](/components/callout/). - A line between bands: a change of ground is the only separator. ## Rules - Give a route next to a form `.hs-form-link`, never `.hs-link`. The form’s gold button is the one gold element in view. - Put a route that belongs to one field in that field’s hint slot: `

`. “Forgot your password?” goes under the password control. - Use one `.hs-form-divider` per form, only between the form and its support note. - Open the support note with the question in `` as its first child, then name each place as a link: “Visit our Help Center or contact Honor Society support.” Two links at most. The CSS puts the question on its own line (`.hs-form-note > strong:first-child` is a block); write no `
`. - Give every route `data-ph-capture-attribute-cta` and `data-ph-capture-attribute-cta-loc` (the band’s `data-section` slug). - Keep the support note on one line in the source: full_html turns a newline between inline elements into `
`. ## Accessibility - Contrast on white: form link navy 12.4:1, note slate 6.2:1, lead-in ink 13.0:1. - The underline shows at rest, so a link in the slate note is clear without colour: navy against slate alone is not enough. - The divider is an `

`. It reads as a separator, which it is. - A form link in the hint slot is a 46px tap target (12px padding above and below, cancelled by a negative margin). Links inside the note and the alt line are inline in a sentence, which WCAG 2.5.8 exempts. - Focus uses the shared ring from `base.css`. `prefers-reduced-motion: reduce` removes the underline transition. ## Variants ### Support note under a divider The foot of an account form. “Need help signing in?” stands on its own line; the two links on the next line go to the help center and its request form. ```html

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

``` ### Form link in the hint slot A route that belongs to one field sits under its control, where the hint goes. At body size: it is a route, not a hint. ```html

Forgot your password?

```