Skip to content
Honor Society®Brand system

v0.6.4

Navigation

Link list and link row

Two or more text links with no button: a vertical list of routes, or a short row of links.

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

What it is

Two or more text links with no button. 40px rows. The list uses quiet links (navy 600, line-strong underline), because stacked gold underlines break “one gold element per viewport”.

When to use

  • Link list: video links under a recipient grid. A member card carries one link, so the videos go here.
  • Link list: a short list of related pages, with an optional meta such as the source or the length.
  • Link row: a band with two or three routes and no button. Use it in place of .hs-actions.

When not to use

  • For a band with one action, use a Button or a single Text link.
  • For one route up to the parent page, use the Back link.
  • For links to sections of the same page, use the Anchor nav.
  • For Honor Society’s channels, use Social links.

Rules

  • Link list: ul.hs-link-list > li.hs-link-list__item > a.hs-link-list__link, plus an optional span.hs-link-list__meta.
  • Link row: ul.hs-link-row > li > a.hs-link. Use two or three links.
  • The link list uses quiet links (navy 600, line-strong underline). A stack of gold underlines breaks “one gold element per viewport, never two stacked”.
  • Each label is a verb plus its destination: “Compare membership tiers”, “Watch Jamie on YouTube”.
  • Every link carries data-ph-capture-attribute-cta (the destination name) and data-ph-capture-attribute-cta-loc (the band slug). Never derive them from the label.
  • The colours follow the ground: white on navy.

Accessibility

  • Both forms are ul lists, so a screen reader announces the number of items.
  • Each row is at least 40px tall, so each link is a full tap target.
  • Contrast: link navy 600, 12.4:1. Meta slate 6.2:1 on white, white 86% on navy.
  • The link list underline is line-strong at rest and turns navy on hover. Its transition stops under prefers-reduced-motion: reduce.

Variants

One route per row with an optional meta. Recipient video links, related pages.

Preview on white

<ul class="hs-link-list">
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/watch?v=VIDEO_ID_11" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Elliot on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/watch?v=VIDEO_ID_11" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Jamie on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/watch?v=VIDEO_ID_11" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Casey on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
</ul>

Two or three .hs-link side by side; wraps on a phone. Use it in place of .hs-actions when the band has no button.

Preview on white

<ul class="hs-link-row">
  <li><a class="hs-link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="membership">Compare membership tiers</a></li>
  <li><a class="hs-link" href="/memberdues" data-ph-capture-attribute-cta="dues" data-ph-capture-attribute-cta-loc="membership">Review membership dues</a></li>
</ul>