# Back link

> One route up to the parent page, above the eyebrow, in place of a two-step breadcrumb.

- Block class: `.hs-back-link`
- CSS: `components/back-link.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: On light, On navy
- HTML page: https://brand.honorsociety.org/components/back-link/

## What it is

One route up to the parent page, above the eyebrow, in place of a two-step breadcrumb. Never both. 14px/600 muted, hairline underline, CSS arrow, 40px target.

## When to use

- A page whose trail is only two steps, such as a scholarship page with a route up to “All scholarships”.
- In the page head on a soft band, or in a hero on navy.

## When not to use

- For a trail of three steps or more, use the [Breadcrumb](/components/breadcrumb/). Never use both on one page.
- For a route that is not the parent page, use a [Text link](/components/link/).
- For several routes, use the [Link list](/components/link-list/).

## Rules

- Use one `a.hs-back-link` per page. Its `href` is the parent page.
- The label names the parent: “All scholarships”. Type no arrow: CSS draws it.
- Place it first in the page head or the hero, above the eyebrow.
- Add `data-ph-capture-attribute-cta` (the destination, such as `scholarships`) and `data-ph-capture-attribute-cta-loc` (the band slug, such as `hero`).
- On navy, add no modifier. The navy ground sets the colours.

## Accessibility

- CSS draws the arrow with empty alternative text (`content: "\2190" / ""`), so a screen reader reads the label only.
- 12px padding above and below makes a 40px tap target.
- Contrast: slate 6.2:1 on light; white 86% on navy, 6.4:1.
- A hairline underline marks the link. Hover turns the text and the underline navy (white on navy).
- The transition stops under `prefers-reduced-motion: reduce`.

## Variants

### On light

In the page head.

```html
<a class="hs-back-link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">All scholarships</a>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1 hs-heading--rule">Study Abroad Scholarship</p>
```

### On navy

No modifier: the navy ground sets white 86% text and a white 24% underline.

```html
<a class="hs-back-link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">All scholarships</a>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1">Study Abroad Scholarship</p>
```