# Card > A bordered 8px panel for one named item; the link form makes the whole card one route. - Block class: `.hs-card` - CSS: `components/card.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: Basic, Link cards in a grid, With a tag, With a small action, Media, On navy, Award, Offer, Offer, locked, Article, Place - HTML page: https://brand.honorsociety.org/components/card/ ## What it is A bordered 8px panel. Basic cards have no shadow. A link card is one `` around the whole card, with the card shadow; hover turns the border navy. No lift, no chevron, no “Learn more”. ## When to use - A grid of what-you-get items, each a named benefit plus one sentence (homepage, hub). - Routes to sibling pages, one card per route, in a `.hs-card-grid`. - A catalog item with its own repeated action, as on the Benefits catalog (basic card plus a small secondary button). - An article or story teaser with an image (`--media` with `--link`). - Short panels on a navy band: the card reads the ground with no modifier. - A catalog result: a scholarship (`--award`), a benefit (`--offer`), an article (`--article`), a university (`--place`). See [R8 Catalog](/recipes/r8-catalog/). ## When not to use - One member in a directory: use [Member card](/components/member-card/). - One outside rating with its source and date: use [Rating](/components/rating/). - Two memberships side by side: use [Plan compare](/components/plan-compare/). - A numbered procedure: use [Steps](/components/steps/). Numbered cards that lead nowhere look clickable. - A note set apart from the copy: use [Callout](/components/callout/). ## Rules - Write a link card as one `` around the whole card. Put no other link, button, chevron or "Learn more" inside it. - `.hs-card--award` is a flex column: the value slot keeps a minimum height and the foot pins to the bottom, so titles and foots line up across a grid row when a card has no value or meta. - A search button in a page head is the band's gold button (see [Search](/components/search/)). The site header's Join button is chrome and does not count. - A card with its own action is a basic `.hs-card`, not a link card. Give the action `.hs-button--secondary .hs-button--sm`. - Give each card link `data-ph-capture-attribute-cta` (the destination name) and `data-ph-capture-attribute-cta-loc` (the band's `data-section` slug). - Content order: optional `.hs-card__icon` or eyebrow, `.hs-card__title`, `.hs-card__text`, then an optional `.hs-card__tag` or action. In `hs_html_page` body HTML, leave out the SVG icon: its validator has no `

`: one column, two from 36rem, three from 62rem with `--3`. The `

` can be the card, or hold it. - Catalog cards share one anatomy: type label or value, title, one line of facts, short text, tags, then the foot with a status or tier badge and at most one action. Leave out any slot with no data. - Slots: `p.hs-card__value` (the one key figure: "$2,500", "20% off"), `p.hs-card__meta` or `ul.hs-card__meta` (one row of facts, joined by a CSS dot), `div.hs-card__logo` > `img` (the partner's own logo, never redrawn; every logo fills the same 144 x 56px tile with `object-fit: contain`, so logos read one size), `ul.hs-card__tags` > `li.hs-tag`, `div.hs-card__foot`. - `--award` is a link card: the value first, then the title. The amount comes from data; with no amount, put an eyebrow ("Scholarship") in its place. Never invent a figure. When the value is parsed from the start of the name, the card title drops that amount; the detail page H1 keeps the full name. - `--offer` is a basic card with one small action, so the benefit page keeps its own route and the card can carry the tier. Add `is-locked` when the benefit needs a tier above the viewer's: the action routes to the tier page and a `--locked` [Status](/components/status/) names the tier. - `--article` combines with `--link` and `--media`; the image is 16:9. `--place` is a compact link card with the location first in the meta. - Write card copy as a named benefit plus one sentence. Use `.hs-card__tag` only for a status the reader must not miss ("Optional upgrade"), in sentence case: CSS uppercases it. ## Accessibility - The title is a heading one level under the band heading (`h3` under the band's `h2`). - Icons take `aria-hidden="true" focusable="false"`: the title names the card. - A `--media` image that only illustrates the title takes `alt=""`. Otherwise its `alt` describes the image and does not repeat the title. - `.hs-card--link:focus-visible` restates the gold outline and navy ring, because the card shadow would replace the base focus ring. - Hover changes only the border colour, so the card does not move. Reduced motion removes the 200ms border transition. - A link card is a real ``, so it works without JavaScript. ## Variants ### Basic A panel: information, no link. ```html

Recognition profile

Put your achievements, goals and potential in one place.

``` ### Link cards in a grid One column, two from 576px, three from 992px with `--3`. Hover a card to see the navy border. ```html
``` ### With a tag A tag names a status the reader must not miss on a scan. ```html
Professional Track™

Add enhanced career and recognition features when useful.
Optional upgrade ``` ### With a small action A basic card with its own small secondary button, as on the Benefits catalog. The card itself is not a link here. ```html

Careers

Career Insider

Job listings, resume upload and Career Insider guidebooks from Vault.

View benefit

``` ### Media Image to the edges, 4:3, `object-fit: cover`. Combine with `--link`. The image path is a placeholder. ```html

Articles

Honor Societies and the Changing Definition of Achievement

Achievement in higher education is no longer defined by a single measure.

``` ### On navy No modifier: the card reads the navy ground’s surface (white 8%) and line (white 24%). ```html
- Mentorship
  
  Resume critiques, mock interviews and first-hand advice from people already in the role.
- Scholarships
  
  Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.
- Career resources
  
  Job listings, resume upload and Career Insider guidebooks from Vault.
``` ### Award A scholarship in a catalog: value first, title, facts, status. One ``. Fictional sample. ```html
- $2,500
  
  Example Leadership Award
  - Honor Society®
  - Undergraduate
  For students who lead a service project on their campus.
  
  Open
  Deadline December 15, 2026
- Grant
  
  Example Study Grant
  - examplefoundation.org
  - Graduate
  Support for a semester of research in a lab of your choice.
  - Research
  - Graduate
``` ### Offer A benefit: partner logo, value, partner name, tier, one small action. The logo is a placeholder. ```html

20% off

Example Learning Co.

Online test prep courses for the GRE, GMAT and LSAT.

Ready to use View benefit

``` ### Offer, locked A benefit above the viewer's tier. The logo greys; the action routes to the tier page. ```html

$50 off

Example Travel Co.

A discount on a first booking of three nights or longer.

Bronze and up See tiers

``` ### Article A media link card with a 16:9 image and a facts line. ```html
Article

How to write a scholarship essay
- Avery Example
- September 2, 2026
``` ### Place A university: compact link card, location first. ```html
- University
  
  Example State University
  
  Springfield, IL
- University
  
  Sample College
  
  Portland, OR
```

Recognition profile

Recognition profile

Scholarships

Member benefits

Professional Track™

Career Insider

Honor Societies and the Changing Definition of Achievement

Mentorship

Scholarships

Career resources

Example Leadership Award

Example Study Grant

Example Learning Co.

Example Travel Co.

How to write a scholarship essay

Example State University

Sample College