Skip to content
Honor Society®Brand system

v0.6.4

Content blocks

Card

A bordered 8px panel for one named item; the link form makes the whole card one route.

Block
.hs-card
CSS
components/card.css (in /brand.css)
JS
None
Status
Decided
Decided in
Components round 1
Markdown
/components/card.md

What it is

A bordered 8px panel. Basic cards have no shadow. A link card is one <a> 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.

When not to use

  • One member in a directory: use Member card.
  • One outside rating with its source and date: use Rating.
  • Two memberships side by side: use Plan compare.
  • A numbered procedure: use Steps. Numbered cards that lead nowhere look clickable.
  • A note set apart from the copy: use Callout.

Rules

  • Write a link card as one <a class="hs-card hs-card--link"> 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). 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 <svg>.
  • Shadow: a basic card and every other plain panel have no shadow. A link card takes --hs-shadow-card. A panel that floats over two bands, such as the Award hero deadline card or a form card that overlaps two bands, takes --hs-shadow-dialog.
  • Put cards in <ul class="hs-card-grid">: one column, two from 36rem, three from 62rem with --3. The <li> 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 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 <a>, so it works without JavaScript.

Variants

Basic

A panel: information, no link.

Preview on soft

Recognition profile

Put your achievements, goals and potential in one place.

<div class="hs-card">
  <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2.2"/><path d="M5.8 16.2a3.4 3.4 0 0 1 6.4 0"/><path d="M14.5 10h4"/><path d="M14.5 13.5h3"/></svg>
  <h3 class="hs-card__title">Recognition profile</h3>
  <p class="hs-card__text">Put your achievements, goals and potential in one place.</p>
</div>

One column, two from 576px, three from 992px with --3. Hover a card to see the navy border.

Preview on white

<ul class="hs-card-grid hs-card-grid--3">
  <li>
    <a class="hs-card hs-card--link" href="/my-membership" data-ph-capture-attribute-cta="profile" data-ph-capture-attribute-cta-loc="what-you-get">
      <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2.2"/><path d="M5.8 16.2a3.4 3.4 0 0 1 6.4 0"/><path d="M14.5 10h4"/><path d="M14.5 13.5h3"/></svg>
      <h3 class="hs-card__title">Recognition profile</h3>
      <p class="hs-card__text">Put your achievements, goals and potential in one place.</p>
    </a>
  </li>
  <li>
    <a class="hs-card hs-card--link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="what-you-get">
      <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="9" r="5.4"/><path d="M8.4 13.5 7 21l5-2.7L17 21l-1.4-7.5"/></svg>
      <h3 class="hs-card__title">Scholarships</h3>
      <p class="hs-card__text">Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.</p>
    </a>
  </li>
  <li>
    <a class="hs-card hs-card--link" href="/benefits" data-ph-capture-attribute-cta="benefits" data-ph-capture-attribute-cta-loc="what-you-get">
      <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3.5 12.1V4.8a1.3 1.3 0 0 1 1.3-1.3h7.3l8.4 8.4a1.3 1.3 0 0 1 0 1.8l-7.3 7.3a1.3 1.3 0 0 1-1.8 0z"/><circle cx="8.2" cy="8.2" r="1.4"/></svg>
      <h3 class="hs-card__title">Member benefits</h3>
      <p class="hs-card__text">Dining, travel, dental and vision savings with Restaurant.com, Hertz, Careington and EyeMed.</p>
    </a>
  </li>
</ul>

With a tag

A tag names a status the reader must not miss on a scan.

Preview on white

Professional Track™

Add enhanced career and recognition features when useful.

Optional upgrade 
<a class="hs-card hs-card--link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="what-you-get">
  <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 20 20 4"/><path d="M9 4h11v11"/></svg>
  <h3 class="hs-card__title">Professional Track&trade;</h3>
  <p class="hs-card__text">Add enhanced career and recognition features when useful.</p>
  <span class="hs-card__tag">Optional upgrade</span>
</a>

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.

Preview on soft

Careers

Career Insider

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

<div class="hs-card">
  <p class="hs-eyebrow">Careers</p>
  <h3 class="hs-card__title">Career Insider</h3>
  <p class="hs-card__text">Job listings, resume upload and Career Insider guidebooks from Vault.</p>
  <div>
    <a class="hs-button hs-button--secondary hs-button--sm" href="/benefits/career-insider" data-ph-capture-attribute-cta="benefit" data-ph-capture-attribute-cta-loc="catalog">View benefit</a>
  </div>
</div>

Media

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

Preview on soft

Articles

Honor Societies and the Changing Definition of Achievement

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

<a class="hs-card hs-card--link hs-card--media" href="/articles/honor-societies-and-changing-definition-achievement" data-ph-capture-attribute-cta="article" data-ph-capture-attribute-cta-loc="suggestions">
  <img class="hs-card__media" src="/placeholders/card.svg" width="400" height="300" alt="" loading="lazy" decoding="async">
  <div class="hs-card__body">
    <p class="hs-eyebrow">Articles</p>
    <h3 class="hs-card__title">Honor Societies and the Changing Definition of Achievement</h3>
    <p class="hs-card__text">Achievement in higher education is no longer defined by a single measure.</p>
  </div>
</a>

On navy

No modifier: the card reads the navy ground’s surface (white 8%) and line (white 24%).

Preview on navy

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

<ul class="hs-card-grid hs-card-grid--3">
  <li class="hs-card">
    <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="9.2" cy="8" r="3.2"/><path d="M3.6 20v-1.2a4.3 4.3 0 0 1 4.3-4.3h2.6a4.3 4.3 0 0 1 4.3 4.3V20"/><path d="M16.4 5.4a3.2 3.2 0 0 1 0 5.5"/><path d="M17.8 14.7a4.3 4.3 0 0 1 3.8 4.3V20"/></svg>
    <h3 class="hs-card__title">Mentorship</h3>
    <p class="hs-card__text">Resume critiques, mock interviews and first-hand advice from people already in the role.</p>
  </li>
  <li class="hs-card">
    <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="9" r="5.4"/><path d="M8.4 13.5 7 21l5-2.7L17 21l-1.4-7.5"/></svg>
    <h3 class="hs-card__title">Scholarships</h3>
    <p class="hs-card__text">Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.</p>
  </li>
  <li class="hs-card">
    <svg class="hs-card__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.9" y="7.3" width="18.2" height="11.9" rx="2"/><path d="M8.7 7.3V5.7a2 2 0 0 1 2-2h2.6a2 2 0 0 1 2 2v1.6"/><path d="M2.9 12.4h18.2"/></svg>
    <h3 class="hs-card__title">Career resources</h3>
    <p class="hs-card__text">Job listings, resume upload and Career Insider guidebooks from Vault.</p>
  </li>
</ul>

Award

A scholarship in a catalog: value first, title, facts, status. One <a>. Fictional sample.

Preview on soft

<ul class="hs-card-grid hs-card-grid--3">
  <li>
    <a class="hs-card hs-card--link hs-card--award" href="/scholarships/example-leadership-award" data-ph-capture-attribute-cta="scholarship" data-ph-capture-attribute-cta-loc="catalog">
      <p class="hs-card__value">$2,500</p>
      <h3 class="hs-card__title">Example Leadership Award</h3>
      <ul class="hs-card__meta"><li>Honor Society&reg;</li><li>Undergraduate</li></ul>
      <p class="hs-card__text">For students who lead a service project on their campus.</p>
      <div class="hs-card__foot">
        <span class="hs-status hs-status--open">Open</span>
        <p class="hs-card__meta">Deadline <time datetime="2026-12-15">December 15, 2026</time></p>
      </div>
    </a>
  </li>
  <li>
    <a class="hs-card hs-card--link hs-card--award" href="/scholarships/example-study-grant" data-ph-capture-attribute-cta="scholarship" data-ph-capture-attribute-cta-loc="catalog">
      <p class="hs-eyebrow">Grant</p>
      <h3 class="hs-card__title">Example Study Grant</h3>
      <ul class="hs-card__meta"><li>examplefoundation.org</li><li>Graduate</li></ul>
      <p class="hs-card__text">Support for a semester of research in a lab of your choice.</p>
      <ul class="hs-card__tags" aria-label="Topics"><li class="hs-tag">Research</li><li class="hs-tag">Graduate</li></ul>
    </a>
  </li>
</ul>

Offer

A benefit: partner logo, value, partner name, tier, one small action. The logo is a placeholder.

Preview on soft

20% off

Example Learning Co.

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

Ready to use View benefit 
<div class="hs-card hs-card--offer">
  <div class="hs-card__logo"><img src="/placeholders/logo.svg" width="240" height="80" alt="Example Learning Co."></div>
  <p class="hs-card__value">20% off</p>
  <h3 class="hs-card__title">Example Learning Co.</h3>
  <p class="hs-card__text">Online test prep courses for the GRE, GMAT and LSAT.</p>
  <div class="hs-card__foot">
    <span class="hs-status hs-status--ready">Ready to use</span>
    <a class="hs-button hs-button--secondary hs-button--sm" href="/benefits/example-learning-co" data-ph-capture-attribute-cta="benefit" data-ph-capture-attribute-cta-loc="catalog">View benefit</a>
  </div>
</div>

Offer, locked

A benefit above the viewer's tier. The logo greys; the action routes to the tier page.

Preview on soft

$50 off

Example Travel Co.

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

Bronze and up See tiers 
<div class="hs-card hs-card--offer is-locked">
  <div class="hs-card__logo"><img src="/placeholders/logo.svg" width="240" height="80" alt="Example Travel Co."></div>
  <p class="hs-card__value">$50 off</p>
  <h3 class="hs-card__title">Example Travel Co.</h3>
  <p class="hs-card__text">A discount on a first booking of three nights or longer.</p>
  <div class="hs-card__foot">
    <span class="hs-status hs-status--locked">Bronze and up</span>
    <a class="hs-button hs-button--secondary hs-button--sm" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="catalog">See tiers</a>
  </div>
</div>

Article

A media link card with a 16:9 image and a facts line.

Preview on soft

Article

How to write a scholarship essay

  • Avery Example
<a class="hs-card hs-card--link hs-card--media hs-card--article" href="/articles/example-article" data-ph-capture-attribute-cta="article" data-ph-capture-attribute-cta-loc="results">
  <img class="hs-card__media" src="/placeholders/card.svg" width="400" height="225" alt="" loading="lazy">
  <div class="hs-card__body">
    <p class="hs-eyebrow">Article</p>
    <h3 class="hs-card__title">How to write a scholarship essay</h3>
    <ul class="hs-card__meta"><li>Avery Example</li><li><time datetime="2026-09-02">September 2, 2026</time></li></ul>
  </div>
</a>

Place

A university: compact link card, location first.

Preview on white

<ul class="hs-card-grid hs-card-grid--3">
  <li>
    <a class="hs-card hs-card--link hs-card--place" href="/university/example-state-university" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="results">
      <p class="hs-eyebrow">University</p>
      <h3 class="hs-card__title">Example State University</h3>
      <p class="hs-card__meta">Springfield, IL</p>
    </a>
  </li>
  <li>
    <a class="hs-card hs-card--link hs-card--place" href="/university/sample-college" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="results">
      <p class="hs-eyebrow">University</p>
      <h3 class="hs-card__title">Sample College</h3>
      <p class="hs-card__meta">Portland, OR</p>
    </a>
  </li>
</ul>