# Credential card

> A card that states a member’s standing: the tier, two facts and the member’s links.

- Block class: `.hs-credential`
- CSS: `components/credential.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Credential
- HTML page: https://brand.honorsociety.org/components/credential/

## What it is

The member’s standing, in an aside next to the profile or on the hub. A 4px honor-gold top bar; fact labels in slate. This is where the tier badge goes.

## When to use

- Use it in the aside next to a member profile.
- Use it on the membership hub to state the member’s tier.
- Use it wherever the tier badge for one member appears with that member’s facts.

## When not to use

- To open a member page: use the [Recognition plate](/components/plate/).
- For one member in a directory: use the [Member card](/components/member-card/).
- To compare tiers: use the comparison [Table](/components/table/).

## Rules

- Compose it on a card: `class="hs-card hs-credential"`. Load `credential.css` after `card.css`.
- Keep this order: `.hs-eyebrow`, the title (`.hs-card__title.hs-credential__title`) with an optional tier badge, `<dl class="hs-credential__facts">`, `<ul class="hs-credential__links hs-hide-below-md">`.
- Give two facts. Wrap each `dt`/`dd` pair in a `<div>`; the grid sets two columns.
- The 4px top bar is honor gold (`--hs-honor-gold`): recognition only. The eyebrow takes gold ink from the card.
- Set fact labels in `--hs-slate`, never `--hs-slate-500`.
- Every link carries `data-ph-capture-attribute-cta` and `data-ph-capture-attribute-cta-loc`.
- Add to LinkedIn carries `organizationId` (the Honor Society LinkedIn Page), never `organizationName`, so the entry links to the Page.
- Put `.hs-hide-below-md` on the links list when it holds Add to LinkedIn: LinkedIn's add-to-profile form opens on desktop web only.

## Accessibility

- Use `<section aria-labelledby>` that points to the title `id`.
- The top bar is decoration (2.4:1 on white). The eyebrow and the title carry the meaning.
- Fact labels are slate 6.2:1. Slate 500 (3.7:1) fails AA at 12px.
- The facts are a `<dl>`, so a screen reader pairs each label with its value.

## Variants

### Credential

Eyebrow, title with the tier badge, two facts, links under a hairline.

```html
<section class="hs-card hs-credential" aria-labelledby="credential-title">
  <p class="hs-eyebrow">Credential</p>
  <h2 class="hs-card__title hs-credential__title" id="credential-title">Gold Member <span class="hs-tier-badge hs-tier-badge--gold">Gold</span></h2>
  <dl class="hs-credential__facts">
    <div><dt>Member since</dt><dd>March 2024</dd></div>
    <div><dt>Articles</dt><dd>3</dd></div>
  </dl>
  <ul class="hs-credential__links">
    <li><a class="hs-link" href="https://www.linkedin.com/profile/add" data-ph-capture-attribute-cta="linkedin_add" data-ph-capture-attribute-cta-loc="profile-credential">Add to LinkedIn</a></li>
  </ul>
</section>
```