Skip to content
Honor Society®Brand system

v0.6.4

Navigation

Back link

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

Block
.hs-back-link
CSS
components/back-link.css (in /brand.css)
JS
None
Status
Built, open to change
Decided in
Components round 3
Markdown
/components/back-link.md

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. Never use both on one page.
  • For a route that is not the parent page, use a Text link.
  • For several routes, use the 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.

Preview on soft

All scholarships

Honor Society® scholarships

Study Abroad Scholarship

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

Preview on navy

All scholarships

Honor Society® scholarships

Study Abroad Scholarship

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