Form link, divider and support 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 or a dialog.

When not to use

• The second route next to a button in a band: use a Text link in .hs-actions.
• A list of two or more routes with no form: use a Link list.
• A link inside a paragraph of page copy: write a plain <a> in Prose.
• A note the reader must act on before submitting: use a 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: <p class="hs-hint"><a class="hs-form-link">. “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 <strong> 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 <br>.
• 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 <br>.

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 <hr>. 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.

<hr class="hs-form-divider">
<p class="hs-form-note"><strong>Need help signing in?</strong> Visit our <a class="hs-form-link" href="https://support.honorsociety.org/hc/en-us" data-ph-capture-attribute-cta="help-center" data-ph-capture-attribute-cta-loc="sign-in">Help Center</a> or <a class="hs-form-link" href="https://support.honorsociety.org/hc/en-us/requests/new" data-ph-capture-attribute-cta="support-request" data-ph-capture-attribute-cta-loc="sign-in">contact Honor Society support</a>.</p>

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.

<div class="hs-field">
  <label class="hs-label" for="note-pass">Password</label>
  <input class="hs-control" id="note-pass" name="pass" type="password" autocomplete="current-password">
  <p class="hs-hint"><a class="hs-form-link" href="/user/password" data-ph-capture-attribute-cta="reset-password" data-ph-capture-attribute-cta-loc="sign-in">Forgot your password?</a></p>
</div>