Cards

Almost everything in Jaunt sits on a card. Every example here is the app’s real component, filled with the docs’ sample trip: Ski Trip 2027, the same one the demo uses.

Card styles

Style	Look	Used for
Light	Green Light fill, card border, Info Text	The info card: forms, voters, tasks, activity, error cards. The default
Teal	Teal Dark fill, white text	Section cards: Welcome, Invited, empty states. A title pill on it turns pale by itself

Two more styles, dark and green, exist in the code, but nothing in the app uses them today.

Every card has 30px corners, 16px padding and the one shadow. A card nested inside another drops to 15px corners.

Card header

Most cards open with a title pill on the left and, when there’s somewhere to go, a round icon button on the right.

Avatars

Size	px	Used for
xs	24	The footer’s Account icon
sm	32	Rows of members on a card
md	40	Lists of people
lg	60	A person’s own card

With no photo, an avatar shows the person’s initials on a teal circle.

ID card

A person’s card: name, a dotted world map with a coral marker on every city from a completed trip, then Jaunts, Cities and Nights totals and the date they joined. Full size is yours, at the top of Home. The compact one is a member’s card on Who.

Once you have a jaunt, your card on Home carries a coral + to start a new one. It turns into an × while the new-jaunt form is open.

Welcome card

A teal card with three steps and a button. Three versions, same card:

Where	Title	Steps
Sign in	Welcome to Jaunt	Gather, Vote, Go
Home, before your first jaunt	Create your first jaunt	Set up, Invite, Vote
An invite link	You’re invited to a jaunt	Gather, Vote, Go

Photo cards

Card	Used for
Poll hero	The top of Where, When and Stay: the leading or winning choice over its photo, with the poll’s status and your vote
Photo title band	A short photo strip carrying just the page’s title pill, for a page with no leader yet, and the Dashboards
Invite card	On an invite link: the jaunt’s photo, name, who’s in it, and roughly when

A photo card’s border and shadow sit on the rounded card itself, never on a wrapper around it (see Elevation).

Placeholders

Shown until there’s a real photo. A stay without a photo gets a glyph that says what kind of stay it is: a hotel for a stay with a booking link, a house for one that was only named (like a friend’s spare room). Both sit on the same teal fill as every other “no photo yet” spot.

An avatar with no photo shows the person’s initials, or a ? if there’s no name either. A photo always wins over both.

Anatomy

Part	Value
Corners	30px (rounded-card). Anything rounded inside: 15px
Border	1px card border (bright teal in dark mode)
Padding	16px, with 16px between items
Shadow	The one shadow-elevated
Header	A title pill, and an icon button on the right when there’s somewhere to go

Do and don’t

One rounded surface, then 15px inside it

✓

Voters

4 of 8 voted

✕

Voters

4 of 8 voted

A card's outer corners are 30px. Anything rounded inside it drops to 15px. Don't nest a 30px card in a 30px card.

The shadow goes on the card itself

✓

✕

Put shadow-elevated on the rounded, filled card, never on a see-through wrapper around it (see Elevation).

Accessibility

• A card is just a container. Its title pill and contents carry the meaning, so screen readers read them in order.
• Avatars give the person’s name as their text alternative. Decorative photos (a jaunt’s cover, a place) are skipped by screen readers.

Source

• src/web/components/Card.tsx, Section.tsx, Avatar.tsx
• src/web/components/HomeUserCard.tsx (ID card), IdCardMap.tsx
• src/web/components/WelcomeCard.tsx
• src/web/components/PollingHeroCard.tsx, PhotoTitleBand.tsx, InviteHeroCard.tsx
• src/web/components/StayPlaceholder.tsx, HotelPlaceholder.tsx, HousePlaceholder.tsx