Credential card

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.
• For one member in a directory: use the Member card.
• To compare tiers: use the comparison 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.

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