Components round 3: built, open to change

Round 3 choices
Component	Built	Status
1. Rating proof card	A: figure first, source above, date below	Built; open
2. Plan compare	A: twin cards, equal weight, ticks	Built; open
3. Leader profile	A: 4:5 portrait beside the bio	Built; open
4. Recipient row with two links	A: member card, two quiet links; B: row list	Decided: A for short lists, B for long lists
5. Video facade	A: centred navy disc, gold on hover	Built; open
Settled additions	Figure, scroll margin, fine print, byline, link list, link row, back link, breadcrumb on navy, social links, disclosure, group heading, compact band	Built

New component 1 of 5

Rating proof card

Built: A (recommended)

How does one outside rating show its figure, its source and its date?

Today on: /legitimacy (R4 proof band: a basic card with .hs-stat__figure at 48–64px, which is band size, inside a card), /reviews, /scam, and the homepage trust bar. Figures: site facts, 2026-10-14.

A. Figure first

Built

Better Business Bureau

A+BBB Rating

BBB Accredited Business

Since 2014

View the BBB profile
Trustpilot

4.6out of 5

From 748 reviews

As of August 2026

Read the reviews on Trustpilot
TrustedSite

Certified

Hosted verification for honorsociety.org

Check the verification

CSS: source 13px/600/0.12em uppercase slate; figure Didot 700 clamp(2.5rem, 1vw + 2.1rem, 3rem)/1 navy, lining-nums; scale 16px/600 slate; basis 16px ink; date 14px slate; link 16px/600 navy with a 1px #D9DDE7 underline, at the foot (margin-top: auto)
Card: .hs-card, gap 4px, 1px #E6E8EF, no shadow
Contrast: figure navy 12.4:1; basis ink 13.0:1; scale and date slate 6.2:1 (5.9:1 on soft)

Fits house style

B. Figure beside

A+
Better Business Bureau
A+ BBB Rating. BBB Accredited Business since 2014.
View the BBB profile
4.6
Trustpilot
4.6 out of 5 from 748 reviews
As of August 2026
Read the reviews

CSS: grid 5rem | 1fr, gap 16px; figure Didot 700 36px/1 navy; text as A
Use: narrow asides, a single proof line

Fits house style

C. Ledger rows

Better Business BureauA+BBB Accredited Business since 2014View the profile
Trustpilot4.6Out of 5 from 748 reviews, as of August 2026Read the reviews

CSS: one white panel, 1px #E6E8EF, 8px radius; rows 12px 16px, inset 1px hairline; from 48rem columns 11rem | 6rem | 1fr | auto; figure Didot 700 28px
Use: a long list of sources on /reviews

Fits house style

New component 2 of 5

Plan compare

Built: A (recommended)

How do the free membership and the optional upgrade sit side by side?

Today on: /prospective-members and /what-honorsocietyorg (R5: two basic cards with prose lists), /career-services (R6: two basic cards, text only), /memberdues. Prices: site facts (joining is free; Bronze $65, 6-month term, 14-day money-back guarantee).

A. Twin cards

Built

Membership

$0 to join

Create your account and start with your member profile and scholarship applications.
- A member profile for your achievements and goals
- Honor Society scholarship applications, subject to each award’s rules
- The Firsthand Mentorship Program
Start Free Membership
Optional upgrade
Professional Track™

From $65 every 6 months

Four tiers. Dues renew every 6 months until you cancel, with a 14-day money-back guarantee.
- Everything in membership
- Career Insider by Vault: industry guides and company profiles
- Infobase Learning Cloud courses
Compare Professional Track™ tiers

CSS: grid 1 col, 2 from 48rem, gap 16/24px; card gap 12px; name Didot 700 22px navy; amount Didot 700 h2 step navy; price words 16px slate; list 16px ink, 8px gap, 1px #E6E8EF line above; tick 6×11px, 2px navy borders, rotate(45deg); route at the foot
Tag: .hs-card__tag “Optional upgrade” on the upgrade card
Contrast: amount and tick navy 12.4:1; list ink 13.0:1; price words slate 6.2:1

Fits house style

B. Joined panel

Membership

$0 to join

A member profile for your achievements and goals
Honor Society scholarship applications
The Firsthand Mentorship Program

Start Free Membership

Professional Track™

From $65 every 6 months

Everything in membership
Career Insider by Vault
Infobase Learning Cloud courses

Compare Professional Track™ tiers

CSS: one panel, 1px #E6E8EF, 8px radius; columns split by an inset 1px line; head strip #F7F8FB with a 1px line under it
Use: reads as one comparison; weaker on a phone (one long panel)

Fits house style

C. Two-column table

What you get	Membership	Professional Track™
Price	$0 to join	From $65 every 6 months
Member profile	Included	Included
Scholarship applications	Included	Included
Career Insider by Vault	—	Included

CSS: .hs-table in .hs-table-wrap, as on the tier pages
Use: more than five features; the tier pages already own this pattern

Fits house style

Why A

Two cards of equal weight say the true thing: the free plan is the primary route and the upgrade is optional. Each card names what it includes, with a navy tick, and never a cross or a dash, so the free card does not read as a lesser product. The routes line up at the foot. B joins the two into one panel, which reads well on desktop but turns into one tall panel on a phone. C belongs to the tier comparison pages. Built in components/plan-compare.css.

Copy rule: a visitor sees “Membership” and “Professional Track™”, and the join route is “Start Free Membership”. A signed-in member sees “Active membership” and “Activate your membership”, never “free” or “paid membership” (see the gallery). Drop the price line on acquisition pages.

New component 3 of 5

Leader profile

Built: A (recommended)

How does the leadership page introduce one person: photo, name, role and biography?

Today on: /society-leadership (nid 91, aboutus): a cream panel with inline styles, the name and role centred, no photo. Copy from prod, 2026-10-14.

A. Portrait beside the bio

Built

Jordan Example

Chief Executive Officer

Jordan Example is a sample leader whose work has centered on helping students find information, connect with resources, and prepare for what comes next. As CEO, Jordan leads a sample membership organization serving students, graduates, and professionals.

Before this role, Jordan founded two sample companies. A graduate of Example State University, Jordan has also written a sample article series.

Example Business Review, 2010: named to a sample list of young entrepreneurs for work on a first company.
Sample Industry News, 2012: named a sample honoree as founder and CEO of a second company.

View Jordan’s Honor Society profile

CSS: grid: phone 1 col, photo max 16rem; 48rem 15rem | 1fr, gap 32px; 62rem 18rem | 1fr, gap 48px. Photo 4:5, 8px radius, cover, position 50% 25%. Name Didot 700 h2 step/1.12 navy; role 16px/600 slate; bio .hs-prose
Contrast: name navy 12.4:1; role slate 6.2:1; bio ink 13.0:1

Fits house style

B. Leader card

Jordan Example

Chief Executive Officer

Entrepreneur and Example State University graduate; founder of two sample companies.

Read Jordan’s biography

CSS: .hs-card--media with a 4:5 image, Didot title, role, one line, one link
Use: a team of three or more leaders; links to a bio page

Fits house style

C. Centred portrait

Jordan Example

Chief Executive Officer

Jordan Example is a sample leader whose work has centered on helping students find information, connect with resources, and prepare for what comes next.

CSS: round .hs-avatar--lg 112–184px; text centred
Like: the prod page, with a photo added

Breaks: people photos stay rectangular; centred long text is hard to read

New component 4 of 5

Recipient row with two links

Decided: A for short lists, B for long lists

How does one recipient carry two routes: the name to the profile, and the school (or the video)?

Today on: /scholarship-recipients-all (131 rows: name to the profile, school to /university/<slug>), and the videos band on /scholarships (R1: basic cards with two gold text links each).

A. Member card, two links

Built

Study Abroad Scholarship
Elliot Example
Placeholder University
Study Abroad Scholarship
Jamie Sample
Watch Jamie on YouTube

CSS: .hs-card.hs-member-card--links: a basic card (no shadow, no hover border). Name link Didot 700 18px navy, 1px #D9DDE7 underline, offset 0.25em; meta link 14px slate, same underline; hover: underline and text navy. Each link inline-flex, min-height 40px
Contrast: name navy 12.4:1; meta slate 6.2:1 (5.9:1 on soft)

Fits house style

B. Row list

Built

CSS: ul, rows with an inset 1px #E6E8EF hairline; name left, school right, wraps on a phone; same links as A
Use: long lists: 131 recipients fit in about a third of the height

Fits house style

C. Stretched link

Study Abroad Scholarship
Elliot Example
Placeholder University

CSS: name link ::after inset 0 covers the card; meta link position relative, z-index 1
Use: the whole card is a target

Breaks: “one card, one link”; a hidden second target inside a card link

New component 5 of 5

Video facade

Built: A (recommended)

How does a video show before it loads, and what does the play control look like?

Today on: /members, /university-relations, /honorsocietyorg-life (YouTube iframes that load with the page), and the recipient video links on award pages (R2) and /scholarships (R1).

A. Centred disc

Built

Elliot Example, Study Abroad Scholarship recipientYouTube

CSS: frame 16:9, 8px radius, navy under the poster; disc 64px navy, 0 0 0 2px white ring plus the dialog shadow; triangle 20×24px white (clip-path), nudged 2px right; hover and focus: disc #FAF053, triangle #172456; 200ms colour only
Caption: 14px slate; title ink 600; meta after a CSS dot
Contrast: the navy disc with its white ring clears 3:1 on a dark or a light poster; hover triangle #172456 on gold 12.4:1

Fits house style

B. Gold label

Elliot Example, Study Abroad Scholarship recipient

CSS: pill bottom-left 16px in; 16px/600 #172456 on #FAF053, gold glow; CSS triangle 12×14px
Use: says “Play video” in words

Breaks: a second gold element beside the band’s gold button

C. Caption bar

Elliot ExamplePlay video

CSS: poster with no overlay; navy bar under it: title white 600, “Play video” 14px/600 with a triangle; hover bar #172456
Use: the poster stays clean

Fits house style

Why A

A centred disc is the play control people already know, and it works on any poster: navy with a white ring on a light photo, the ring on a dark one. It turns gold only under the pointer or the focus, so the band keeps one resting gold element. B puts a permanent gold pill next to the band’s button. C is clear but adds a navy bar to every video and moves the target off the image. Built in components/video.css and components/video.js.

No script: the link opens YouTube. With video.js: a click swaps the link for a youtube-nocookie player that starts at once; nothing loads from YouTube before the click. Reduced motion: no transition, and the player never starts on its own. Host the poster on our server; an i.ytimg.com poster contacts Google before the click.

No real alternative

Settled additions

These follow decisions already made. Each is live; open “HTML” for the snippet.

Anchor scroll margin (base.css, no visual): every element with an id gets scroll-margin-top: calc(var(--hs-header-h) + 16px), and --hs-header-h-lg from 62rem. It sits in :where([id]), so a component can override it. The theme no longer needs to set it per page.

Placeholder image — Commencement marks one achievement; recognition carries it forward.

Figure and caption

Class form .hs-figure; inside .hs-prose a plain <figure> gets the same style. Image full width, 8px radius; caption 14px slate, 8px under it, 52ch. base.css.

HTML

<figure class="hs-figure">
  <img class="hs-figure__img" src="/placeholders/figure.svg" width="1200" height="800" alt="Placeholder image" loading="lazy">
  <figcaption class="hs-figure__caption">Commencement marks one achievement; recognition carries it forward.</figcaption>
</figure>

Ratings and review counts can change. BBB accreditation concerns business standards, not academic accreditation. See the Transparency Statement.

Fine print

14px, muted on every ground (slate 6.2:1; white 86% on navy), 44rem. Links keep a 1px underline in the text colour. Replaces the borrowed .hs-card__meta. Legal terms use the disclosure. base.css.

HTML

<p class="hs-fine-print">Ratings and review counts can change. BBB accreditation concerns business standards, not academic accreditation. See the <a href="/transparency">Transparency Statement</a>.</p>

Taylor ExampleApril 1, 2026

Byline

40px avatar (alt=""), the author as a link in ink 600 with a line-strong underline, the date in slate after a CSS dot. base.css.

HTML

<p class="hs-byline"><img class="hs-avatar" src="/placeholders/avatar.svg" width="40" height="40" alt=""><span class="hs-byline__text"><a class="hs-byline__name" href="/members/taylor-example">Taylor Example</a><span class="hs-byline__date"><time datetime="2026-04-01">April 1, 2026</time></span></span></p>

Watch Elliot on YouTubeStudy Abroad Scholarship
Watch Jamie on YouTubeStudy Abroad Scholarship
Watch Casey on YouTubeStudy Abroad Scholarship

Link list

One route per row, 40px rows, optional 14px meta. Quiet links (navy 600, line-strong underline, navy on hover): a stack of gold underlines breaks “never two stacked”. link-list.css.

HTML

<ul class="hs-link-list">
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Elliot on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Jamie on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
  <li class="hs-link-list__item"><a class="hs-link-list__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Casey on YouTube</a><span class="hs-link-list__meta">Study Abroad Scholarship</span></li>
</ul>

Link row

Two or three .hs-link side by side, no button; wraps on a phone, 40px rows, gap 12px 32px. Use it in place of .hs-actions when the band has no button. link-list.css.

HTML

<ul class="hs-link-row">
  <li><a class="hs-link" href="/membership-tiers" data-ph-capture-attribute-cta="membership-tiers" data-ph-capture-attribute-cta-loc="membership">Compare membership tiers</a></li>
  <li><a class="hs-link" href="/memberdues" data-ph-capture-attribute-cta="dues" data-ph-capture-attribute-cta-loc="membership">Review membership dues</a></li>
</ul>

All scholarships

Honor Society® scholarships

Study Abroad Scholarship

Back link

One route up, above the eyebrow, in place of a two-step breadcrumb. 14px/600 muted with a hairline underline; the arrow is CSS. 40px tap target. back-link.css.

HTML

<a class="hs-back-link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">All scholarships</a>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1 hs-heading--rule">Study Abroad Scholarship</p>

All scholarships

Honor Society® scholarships

Study Abroad Scholarship

Back link on navy

No modifier: white 86% text (6.4:1), white 24% underline, white on hover.

HTML

<a class="hs-back-link" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">All scholarships</a>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1">Study Abroad Scholarship</p>

Honor Society® scholarships

Study Abroad Scholarship

Breadcrumb on navy

The breadcrumb reads the ground: white 86% links and current page, white 24% underline, white on hover. As on the award hero (R2).

HTML

<nav class="hs-breadcrumb" aria-label="Breadcrumb">
  <ol class="hs-breadcrumb__list">
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/">Home</a></li>
    <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/scholarships">Scholarships</a></li>
    <li class="hs-breadcrumb__item" aria-current="page">Study Abroad Scholarship</li>
  </ol>
</nav>
<p class="hs-eyebrow">Honor Society&reg; scholarships</p>
<p class="hs-heading hs-heading--h1">Study Abroad Scholarship</p>

Social links: icons

40px round icon links with a 1px ring; the name is visually hidden. Simple 1.5px stroke glyphs, not vendor logos. Hover turns the ring navy. social.css.

HTML

<ul class="hs-social" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 10.5V16.5"/><path d="M8 7.5v.1"/><path d="M11.5 16.5v-6"/><path d="M11.5 13.2a2.6 2.6 0 0 1 5.2 0v3.3"/></svg><span class="hs-visually-hidden">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><path d="M16.9 7.1v.1"/></svg><span class="hs-visually-hidden">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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="M14.5 21v-7h2.6l.4-3.2h-3V8.9c0-.9.3-1.6 1.6-1.6h1.6V4.5a20 20 0 0 0-2.4-.1c-2.4 0-4 1.4-4 4.1v2.3H8.7V14h2.6v7"/></svg><span class="hs-visually-hidden">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.5 9.6v4.8l4.2-2.4z"/></svg><span class="hs-visually-hidden">YouTube</span></a></li>
</ul>

Social links: labelled

--labelled: icon plus the visible name, for a band whose content is the channels.

HTML

<ul class="hs-social hs-social--labelled" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 10.5V16.5"/><path d="M8 7.5v.1"/><path d="M11.5 16.5v-6"/><path d="M11.5 13.2a2.6 2.6 0 0 1 5.2 0v3.3"/></svg><span class="hs-social__label">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><path d="M16.9 7.1v.1"/></svg><span class="hs-social__label">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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="M14.5 21v-7h2.6l.4-3.2h-3V8.9c0-.9.3-1.6 1.6-1.6h1.6V4.5a20 20 0 0 0-2.4-.1c-2.4 0-4 1.4-4 4.1v2.3H8.7V14h2.6v7"/></svg><span class="hs-social__label">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__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.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.5 9.6v4.8l4.2-2.4z"/></svg><span class="hs-social__label">YouTube</span></a></li>
</ul>

Social links: text only

--text: no SVG, for hs_html_page (its validator has no <svg>). Styled as the anchor nav: navy 600, line-strong underline.

HTML

<ul class="hs-social hs-social--text" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">YouTube</span></a></li>
</ul>

Scholarships: important disclosure

Scholarships referenced on this site are competitive, subject to eligibility criteria, and not guaranteed.

No purchase necessary. No purchase or payment is required to apply for Honor Society® scholarships.

Honor Society® is a privately operated membership organization and does not operate as a nonprofit. Membership fees are not charitable contributions, are not tax-deductible, and do not guarantee receipt of any scholarship or financial award.

For the terms that govern our programs and website, read the Terms of Service.

Disclosure

Legal and participation terms in their own band. 14px/1.6 slate, 44rem; bold labels and h3 in ink 600 Mukta; inline links with a 1px underline. Element selectors, so pasted terms need no classes. disclosure.css.

HTML

<div class="hs-disclosure">
  <h3>Scholarships: important disclosure</h3>
  <p>Scholarships referenced on this site are competitive, subject to eligibility criteria, and not guaranteed.</p>
  <p><strong>No purchase necessary.</strong> No purchase or payment is required to apply for Honor Society&reg; scholarships.</p>
  <p>Honor Society&reg; is a privately operated membership organization and does not operate as a nonprofit. Membership fees are not charitable contributions, are not tax-deductible, and do not guarantee receipt of any scholarship or financial award.</p>
  <p>For the terms that govern our programs and website, read the <a href="/terms">Terms of Service</a>.</p>
</div>

A 13 members

B 2 members

Blake PlaceholderPlaceholder University

Group heading with a count

Didot h3 title plus a 14px/600 slate count on its baseline, a 1px line under it; 48px between groups (.hs-group + .hs-group). The count comes from code. group-head.css.

HTML

<div class="hs-group" id="letter-a">
  <h3 class="hs-group-head"><span class="hs-group-head__title">A</span> <span class="hs-group-head__count">13 members</span></h3>
  <ul class="hs-card-grid hs-card-grid--3">
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/avery-example" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Avery Example</span><span class="hs-member-card__meta">Example State University</span></span></a></li>
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/alex-sample" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Alex Sample</span><span class="hs-member-card__meta">Sample College</span></span></a></li>
  </ul>
</div>
<div class="hs-group" id="letter-b">
  <h3 class="hs-group-head"><span class="hs-group-head__title">B</span> <span class="hs-group-head__count">2 members</span></h3>
  <ul class="hs-card-grid hs-card-grid--3">
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/blake-placeholder" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Blake Placeholder</span><span class="hs-member-card__meta">Placeholder University</span></span></a></li>
  </ul>
</div>

Compact band

.hs-band--compact: 16px top and bottom, 24px from 48rem, for one row (the anchor nav). Under the award hero the overhang padding still wins. band.css.

HTML

<section class="hs-band hs-band--compact" data-section="on-this-page">
  <div class="hs-container">
    <nav class="hs-anchor-nav" aria-labelledby="on-this-page-compact">
      <p class="hs-anchor-nav__label" id="on-this-page-compact">On this page</p>
      <ul class="hs-anchor-nav__list">
        <li><a class="hs-anchor-nav__link" href="#requirements">Eligibility and materials</a></li>
        <li><a class="hs-anchor-nav__link" href="#process">How to apply</a></li>
        <li><a class="hs-anchor-nav__link" href="#recipients">Recipient stories</a></li>
        <li><a class="hs-anchor-nav__link" href="#faq">FAQs</a></li>
      </ul>
    </nav>
  </div>
</section>

Rating proof card

A. Figure first

B. Figure beside

C. Ledger rows

Plan compare

A. Twin cards

Membership

Professional Track™

B. Joined panel

Membership

Professional Track™

C. Two-column table

Leader profile

A. Portrait beside the bio

Jordan Example

B. Leader card

Jordan Example

C. Centred portrait

Jordan Example

Recipient row with two links

A. Member card, two links

Elliot Example

Jamie Sample

B. Row list

C. Stretched link

Elliot Example

Video facade

A. Centred disc

B. Gold label

C. Caption bar

Settled additions

Figure and caption

Fine print

Byline

Link list

Link row

Back link

Back link on navy

Breadcrumb on navy

Social links: icons

Social links: labelled

Social links: text only

Scholarships: important disclosure

Disclosure

A 13 members

B 2 members

Group heading with a count

Compact band