# Text link

> The text link for every route that is not the band’s one button: navy, weight 600, gold underline.

- Block class: `.hs-link`
- CSS: `components/link.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-1.html
- Variants: On light, On navy, Inline, in prose
- HTML page: https://brand.honorsociety.org/components/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](/components/button/).
- Two or more links together: use a [Link list](/components/link-list/). Stacked gold underlines break “one gold element per viewport”.
- “On this page” links: use the [Anchor nav](/components/anchor-nav/).
- A link inside a paragraph: write a plain `<a>` in [Prose](/components/prose/).
- A repeated action in a card or a dialog: use `.hs-button--secondary` ([Button](/components/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.

```html
<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.

```html
<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.

```html
<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>
```