Camp card draft

Anatomy

root

The card surface: an emphasis-dependent fill (bg-primary for Standard, bg-brand-primary for Residential), a card hairline, the generic card radius, content clipped. Fluid between 280px and 460px wide (360px is the Figma reference width).

featured-border

A 4px brand rule across the very top, shown only for a featured camp.

media

The 16:9 camp photo (360x202.5 at the reference width — an exact ratio, not the rounded 360x203 the frame previously used), cover-cropped, with a centered 70% subject-safe area. When no photo is published it falls back to a clearly-marked image placeholder on bg-secondary — a marked placeholder, never stock or mock photography. The photo is retained in every state, including Sold out.

club-logo

A 48x48 radius-xl viewport pinned 16px from the media's bottom-right, holding 40x40 partner artwork scaled to Fit — never Crop, so irregular crests and wordmarks are not clipped. Unmasked on purpose. Falls back to a clearly-marked logo placeholder when the club has no artwork.

content

The padded body stack below the media — 24px inline padding, 20px block padding, 12px between groups.

calendar-date

The 54x54 Data display/Calendar date tile in Style=Beestera: brand-yellow outer stroke, brand month header over a brand-tinted day body, no internal divider. Month is a three-letter uppercase abbreviation.

title

The camp name — text-lg bold, the card's only heading.

availability-badge

The pill stating whether registration is possible: Success 'Registration Open' normally, Error 'Sold out' when State=Sold out.

remaining-spots

The free-text inventory count beside the badge ('Only 8 left'), set at text-xs semibold. Its colour encodes urgency; it is omitted entirely when inventory is healthy, and when the camp is sold out. In State=Sold out the availability area holds the 63x22 'Sold out' badge and nothing else — no empty box is reserved where the count would have been.

tags

Descriptive tags for the camp — one camp-format tag (Overnight, Extended Day or Day Camp) plus seasonal and geographic metadata. A single-line, fill-width row with clipping protection: it never wraps and never extends past the card. At the 360px reference width it shows two priority tags plus the overflow count.

tag-overflow

The Tags/Overflow count component — a compact, tokenized '+N' indicator closing the tag row, revealed by Show tag overflow. Informational, not an interactive control: the card itself is the link, so this must never become a nested button.

feature-callout

The Cards/Camp feature callout — a GK marker plus a one-line label, revealed by Show goalkeeper training. More prominent than a tag, secondary to price and registration.

essential-details

Location, dates/ages and club rows, each a 24x24 Beestera icon (location, calendar, cleat) beside text-xs metadata.

price

A 'From' eyebrow with an optional Early bird badge, then an optional struck-through previous price followed by the current price and its unit.

early-bird-badge

The promotional Early bird pill in the price eyebrow — brand-toned, never a success/green tone.

action

The Register button: a brand-gradient pill on the shared Button's Primary treatment, the explicit primary action. In State=Sold out it renders the shared Button's Disabled treatment — a bg-quaternary fill with text-quaternary label, no gradient — and accepts neither pointer nor keyboard activation.

Token bindings

Each binding's value is resolved live from the built @beestera/tokens output — tier-2 component tokens (--camp-card-*) collapse through the foundation tier.

Variants

state DefaultHoverFocusedSold out

The Figma State axis. Default/Hover/Focused are the card details link's interaction states. Sold out is NOT an interaction state — it is the single source of truth for zero inventory: the Error 'Sold out' badge replaces the Success badge, the photo and every other detail stay fully readable, and Register renders the shared Button's Disabled treatment. Never model sold-out as a separate overlay or boolean alongside this axis. There is deliberately no card-level Disabled state: a finished camp leaves the active Browse Camps inventory rather than sitting in the list greyed out.

campTypeEmphasis StandardResidential

Standard is the day-camp presentation on a bg-primary (white) surface. Residential identifies the broader residential program family and applies its branded treatment: the card surface becomes bg-brand-primary, and the calendar-date tile inverts its day-body to bg-primary so the tile stays legible against the tinted card. Structure, spacing and every other token are shared with Standard. Residential is an emphasis, NOT a schedule-format tag — see the tags part for the format vocabulary.

showTagOverflow truefalse

The Figma boolean revealing the Tags/Overflow count component at the end of the tag row. True whenever the camp has more tags than fit the row at the current width; the count itself is an editable Count property (+1, +2, +3...) in Figma and a computed value in code.

availability Registration openHealthyRunning lowNearly gone

Derived from live inventory, not chosen as a Figma variant property. 'Registration open' is the Success badge shown whenever the camp is not sold out. The other three tier the remaining-spots count: Healthy (>25% AND >10 spaces) stays neutral or omits the count entirely; Running low (11-25% OR 4-10 spaces) uses warning text; Nearly gone (<=10% OR 1-3 spaces) uses error text. When percentage and count disagree, take the more urgent of the two.

State matrix

default

Resting card. The whole surface is the camp-details link; Register sits inside it as a separate control.

hover

The card details link lifts to the medium elevation (--shadow-md). Hovering Register is the button's own concern.

focus

Keyboard focus on the card details link paints the shared focus ring — a 4px ring offset from the card by a 2px bg-primary halo.

Accessibility

Role

The root is a link to the camp-details page (a real <a>, or a card-wide link overlay). Register is a separate <button>/<a> that MUST NOT be nested inside the card link — two controls, not one.

Contrast

Badge labels sit on their own tint at >= 4.5:1 (green-700 on green-50, red-700 on red-50, brand-900 on brand-50). The availability urgency tiers are colour-only signals, so the count text must always state the number ('Only 3 left') — colour never carries the meaning alone.

Focus order

Card details link first, then Register. The Focused variant is the card link's focus, not the button's; each control keeps its own visible ring.

Target size

Register is 44px tall in the Figma reference and must stay >= 44px. The card link's own target is the full card, so it always clears the minimum.

• Sold out must expose registration as unavailable programmatically (a disabled button, or aria-disabled plus a non-interactive handler) — dimming it visually is not enough.
• Never add a sold-out scrim or overlay over the media: the description is explicit that content stays readable and the Error badge is the only signal.
• The media photo is decorative — the title carries the camp name, so the image takes an empty alt.
• The club logo is decorative whenever the club name is already present in the essential-details rows; otherwise it needs the club name as its accessible name.
• Tag overflow ('+3') hides real content from screen-reader users. The indicator must name what it hides — aria-label="3 more: Day Camp, Summer, NY" — and the complete tag list must be present on the details page.
• The '+N' indicator is informational, never a nested interactive control: the card is already a link, and a button inside it would be a second tab stop to the same destination.

Implementations

Not implemented in any product repo yet. This repo owns the spec; implementations land in each product repo on their own cadence.

Figma source: Cards/Camp card