Brand system
Components
Each page has the rules, a live preview of every variant and the HTML that drew it. The preview and the code come from one snippet. Add .md to a page path for the Markdown.
Page structure
.hs-band
Band and container
A full-width section with one ground and one idea; a page is a stack of bands.
.hs-page-head
Page head
The soft opening band of a conversion or utility page: eyebrow, ruled H1, lead, optional action row.
.hs-hero
Hero
The navy opening band of an acquisition page: thesis H1, lead, one gold button, one text link.
.hs-cta-band
CTA band
The navy, centred closing band of a page: it names the product and offers one action.
.hs-award-hero
Award hero
The navy opening band of one award page: name, facts, and a deadline card with the Apply button.
.hs-group-head
Group heading
The title and computed count of one group inside a band, such as a letter in a directory.
.hs-detail
Detail layout
The body of an item page: a main column and a key-facts aside that sticks on desktop and comes first on phones.
.hs-hide-below-md
Utilities
Single-purpose classes that sit on any element, such as hiding a feature on phones.
Type and text
.hs-link
Text link
The text link for every route that is not the band’s one button: navy, weight 600, gold underline.
.hs-eyebrow
Eyebrow
A short uppercase label above a heading; the ground sets its colour.
.hs-heading
Heading
Didot 700 headings at the h1, h2 and h3 steps, with an optional gold or honor rule.
.hs-prose
Prose
The wrapper for long-form body copy: articles and editor pages, styled by element with no classes inside.
.hs-figure
Figure
An image at full column width with an optional caption, for templates and article bodies.
.hs-fine-print
Fine print
A short 14px muted note under content: conditions, sources and “as of” lines.
.hs-byline
Byline
Who wrote a piece and when: a 40px avatar, the author name as a link, and the date.
Navigation
.hs-anchor-nav
Anchor nav
“On this page” links to the bands below, in their own band directly under the page head.
.hs-tabs
Tabs
Switches between sibling views of one subject, such as a member’s Profile and Articles, each at its own URL.
.hs-chips
Filter chips and tags
Filter chips narrow one list by category; tags show static labels such as a skill or a language.
.hs-load-more
Load more
One navy button under a card grid that shows the next page of cards, with the count above it.
.hs-breadcrumb
Breadcrumb
Shows a trail of three or more steps above the eyebrow in the page head.
.hs-pager
Numbered pager
Numbered links between the pages of a long list, each page at its own URL.
.hs-link-list
Link list and link row
Two or more text links with no button: a vertical list of routes, or a short row of links.
.hs-back-link
Back link
One route up to the parent page, above the eyebrow, in place of a two-step breadcrumb.
.hs-social
Social links
Links to Honor Society’s own LinkedIn, Instagram, Facebook and YouTube channels.
.hs-results-bar
Results bar
The line above a catalog's results: the count as a status line, the sort, and the active filters as removable chips.
Content blocks
.hs-card
Card
A bordered 8px panel for one named item; the link form makes the whole card one route.
.hs-callout
Callout
A light panel with a 4px bar that sets a note or a status message apart from the copy.
.hs-quote
Quote
A member testimonial in Didot italic with a CSS opening mark; the card form fills a review grid.
.hs-stat
Stat
A large checkable figure in Didot that anchors a navy band or a row of two to three figures.
.hs-steps
Steps
A numbered procedure where order matters, with CSS numerals in navy rings.
.hs-qa
FAQ
Questions with their answers; an open list by default, an accordion for long sets at a page foot.
.hs-table
Table
A data table, or a tier comparison table, in a white panel that scrolls sideways on its own.
.hs-empty
Empty state
What an empty list shows: one line on what is missing, one slate line, and the one action that fills it.
.hs-disclosure
Disclosure
Legal and participation terms in their own quiet 14px band, after the FAQ and before the CTA band.
.hs-plan-compare
Plan compare
Two memberships side by side as equal cards: the free membership first, the optional upgrade second.
.hs-video
Video facade
A click-to-load video: a poster with a play button that swaps in the YouTube player on click.
.hs-status
Status
A small pill that states where an item stands: open, closing soon, closed, new, locked or ready to use.
.hs-result
Result
One row in a list of search results of mixed types: type label, title link, path and a snippet with the match in bold.
.hs-facts
Facts
The key facts of one item in a bordered panel, with its one primary action and an optional note.
Recognition and people
.hs-plate
Recognition plate
The cream recognition band that opens a member page, with the member’s name as the page H1.
.hs-credential
Credential card
A card that states a member’s standing: the tier, two facts and the member’s links.
.hs-tier-badge
Tier badge
The tier name as a small solid pill in the tier colour, on the credential card and in lists.
.hs-avatar
Avatar
A member’s photo or initials in a circle, in three sizes: 40px, 64px and a fluid 112–184px.
.hs-member-card
Member card
One member or scholarship recipient in a directory, as a horizontal card with avatar, Didot name and meta.
.hs-rating
Rating proof card
One outside rating with its figure, source and date, linked to the live vendor profile.
.hs-leader
Leader profile
One person in the society’s leadership: a 4:5 portrait beside the name, the role and the biography, or the text alone when no portrait exists.
Forms and controls
.hs-form
Form
Labels, controls, checks, errors, the form alert and the password field for every form a member fills in.
.hs-code
Code box
Shows the coupon or promotion code a member copies after they redeem a benefit.
.hs-dialog
Dialog
A native modal for a short edit form or a confirm that keeps the member on the page.
.hs-auth
Auth card
The one centred column of an account page: a bordered card with the heading, the form and the help line, and one quiet line under it.
.hs-form-note
Form link, divider and support note
The quiet routes around a form, the hairline under it and the one line that says where to get help.
.hs-confirm
Confirmation panel
What a page shows in place of its form after the form sent something: what happened, where it went, the next step.
.hs-search
Search
One search field and its button in a GET form, for site search and the head of a catalog.
.hs-filter
Filter
The filter panel above a catalog: one row of selects on wide screens, a Filters disclosure on phones, one GET form.