# 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 class: `.hs-link-list` - CSS: `components/link-list.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: Link list, Link row - HTML page: https://brand.honorsociety.org/components/link-list/ ## 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](/components/button/) or a single [Text link](/components/link/). - For one route up to the parent page, use the [Back link](/components/back-link/). - For links to sections of the same page, use the [Anchor nav](/components/anchor-nav/). - For Honor Society’s channels, use [Social links](/components/social/). ## 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 ### Link list One route per row with an optional meta. Recipient video links, related pages. ```html

``` ### Link row 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. ```html

```