# Plan compare

> Two memberships side by side as equal cards: the free membership first, the optional upgrade second.

- Block class: `.hs-plan-compare`
- CSS: `components/plan-compare.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: Visitor, Signed-in member
- HTML page: https://brand.honorsociety.org/components/plan-compare/

## What it is

Two memberships side by side, equal weight, the free plan first. Built: A, twin cards ([round 3](/decisions/components-round-3/)). One card carries the gold button at most; the other a text link. Drop the price line on acquisition pages.

## When to use

- Visitor pages that set the free membership beside Professional Track™: `/prospective-members`, `/what-honorsocietyorg`, `/career-services`.
- A signed-in member who has no active membership: their account today beside an active membership, as on `/memberdues`.

## When not to use

- More than five features, or one column per tier: use the comparison [Table](/components/table/).
- A member’s current tier: use the [Credential card](/components/credential/).
- One closing call to join: use the [CTA band](/components/cta-band/).

## Rules

- Markup: `<ul class="hs-plan-compare">` with two `<li class="hs-card hs-plan">`. Put the free plan first. Load `plan-compare.css` after `card.css`.
- Keep this order in each plan: optional `.hs-card__tag`, `.hs-plan__name`, `.hs-plan__price`, `.hs-plan__text`, `.hs-plan__list`, `.hs-plan__foot`.
- Give the gold `.hs-button` to one card at most. The other card gets a `.hs-link`. Both routes carry `data-ph-capture-attribute-cta` and `data-ph-capture-attribute-cta-loc`.
- List only what the plan includes. Use no crosses and no dashes.
- Take prices from site facts. Drop the price line on the homepage, landing pages and join.
- Copy to a signed-in member never says “free membership” or “paid membership”.

## Accessibility

- The plans and their items are real lists. The CSS draws the tick, so a screen reader reads each item as plain text.
- Contrast: amount and tick navy 12.4:1; list ink 13.0:1; price words and text slate 6.2:1.
- Below 36rem the button takes the full card width.

## Variants

### Visitor

“Membership” and “Professional Track™”; the join route is “Start Free Membership”.

```html
<ul class="hs-plan-compare">
  <li class="hs-card hs-plan">
    <h3 class="hs-plan__name">Membership</h3>
    <p class="hs-plan__price"><span class="hs-plan__amount">$0</span> to join</p>
    <p class="hs-plan__text">Create your account and start with your member profile and scholarship applications.</p>
    <ul class="hs-plan__list">
      <li class="hs-plan__item">A member profile for your achievements and goals</li>
      <li class="hs-plan__item">Honor Society scholarship applications, subject to each award&rsquo;s rules</li>
      <li class="hs-plan__item">The Firsthand Mentorship Program</li>
    </ul>
    <p class="hs-plan__foot"><a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="plans">Start Free Membership</a></p>
  </li>
  <li class="hs-card hs-plan">
    <span class="hs-card__tag">Optional upgrade</span>
    <h3 class="hs-plan__name">Professional Track&trade;</h3>
    <p class="hs-plan__price">From <span class="hs-plan__amount">$65</span> every 6 months</p>
    <p class="hs-plan__text">Four tiers. Dues renew every 6 months until you cancel, with a 14-day money-back guarantee.</p>
    <ul class="hs-plan__list">
      <li class="hs-plan__item">Everything in membership</li>
      <li class="hs-plan__item">Career Insider by Vault: industry guides and company profiles</li>
      <li class="hs-plan__item">Infobase Learning Cloud courses</li>
    </ul>
    <p class="hs-plan__foot"><a class="hs-link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="plans">Compare Professional Track&trade; tiers</a></p>
  </li>
</ul>
```

### Signed-in member

Never “free” or “paid membership”: the second card is “Active membership”, the route “Activate your membership”.

```html
<ul class="hs-plan-compare">
  <li class="hs-card hs-plan">
    <h3 class="hs-plan__name">Your account today</h3>
    <p class="hs-plan__text">Your member profile and scholarship applications stay open to you.</p>
    <ul class="hs-plan__list">
      <li class="hs-plan__item">Your member profile</li>
      <li class="hs-plan__item">Honor Society scholarship applications</li>
      <li class="hs-plan__item">The Firsthand Mentorship Program</li>
    </ul>
  </li>
  <li class="hs-card hs-plan">
    <h3 class="hs-plan__name">Active membership</h3>
    <p class="hs-plan__price">From <span class="hs-plan__amount">$65</span> every 6 months</p>
    <p class="hs-plan__text">Your certificate and career benefits need an active membership.</p>
    <ul class="hs-plan__list">
      <li class="hs-plan__item">Your membership certificate</li>
      <li class="hs-plan__item">Career Insider by Vault</li>
      <li class="hs-plan__item">Infobase Learning Cloud courses</li>
    </ul>
    <p class="hs-plan__foot"><a class="hs-button" href="/memberdues" data-ph-capture-attribute-cta="dues" data-ph-capture-attribute-cta-loc="plans">Activate your membership</a></p>
  </li>
</ul>
```