Text link

What it is

Every route that is not the band’s one button. Navy (white on navy), 600 weight, 2px action-gold underline. Hover changes only the underline.

When to use

• The second route next to a button, in the same .hs-actions row: Member sign in after Start Free Membership.
• The one route of a band that has no button, such as Compare Professional Track™ Options.
• The route under the Apply button in the award hero card.

When not to use

• The band’s one action: use a Button.
• Two or more links together: use a Link list. Stacked gold underlines break “one gold element per viewport”.
• “On this page” links: use the Anchor nav.
• A link inside a paragraph: write a plain <a> in Prose.
• A repeated action in a card or a dialog: use .hs-button--secondary (Button). A text link is not a tap-size control.

Rules

• Use .hs-link with no modifier on every ground. The ground sets the colour through --hs-ctx-link.
• Put at most one .hs-link after the button in an .hs-actions row.
• Write the label as a verb plus the noun the visitor gets. No “Click here” and no “Learn more”.
• Give every route data-ph-capture-attribute-cta and data-ph-capture-attribute-cta-loc (the band’s data-section slug).
• Inside .hs-prose, leave the class off. The prose rule styles a plain <a>.

Accessibility

• The text is navy on white, 12.4:1, at rest and on hover. Hover changes only the underline: to navy on light, to white on navy.
• The 2px gold underline shows at rest, so a touch user sees the link without hover.
• In prose a link carries two cues, the gold underline and weight 500, because navy against ink text is 1.04:1.
• aria-current on a .hs-link sets the underline to the hover colour.
• Focus uses the shared ring from base.css. prefers-reduced-motion: reduce removes the underline transition.

Variants

On light

Hover turns the underline navy.

<a class="hs-link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="professional-track">Compare Professional Track&trade; Options</a>

On navy

No modifier: the navy ground sets the colours. Hover turns the underline white.

<a class="hs-link" href="https://store.honorsociety.org/" data-ph-capture-attribute-cta="shop" data-ph-capture-attribute-cta-loc="ring">See it in the Member Shop</a>

Inline, in prose

Links inside .hs-prose get a text-decoration underline instead, so they wrap across lines. See Prose below.

<div class="hs-prose">
  <p>Honor societies reflect this shift by aligning <a href="/articles/role-recognition-academic-and-professional-communities">recognition</a> with a more comprehensive understanding of success.</p>
</div>