Title pills
A title pill names a card or a page: an icon in a round badge, then a short label. It sits at the top-left of its card, often with a round icon button beside it. It’s used about 70 times across the app.
Variants
Section titled “Variants”Default
Large
Small
Logo
Required
| Variant | When to use | Real examples |
|---|---|---|
| Default | Titling a card | Where, When, Stay, Poll |
| Large | Titling a big section or a whole form. Same height, bigger text | Home’s Voting, Happening and Completed sections, Sign In, Sign Up, Invited |
| Small | A label inside a card, not a card’s title | Time and date rows on the trip page |
| Logo | When the icon is the Jaunt logo. The badge turns mint (near-black in dark mode) | Create a new Jaunt, Welcome to Jaunt |
| Required | Titling a form section that must be filled in. Adds a pale red asterisk | Jaunt name, image and category when creating a jaunt |
On a teal card
Section titled “On a teal card”A pill on a solid teal card turns pale by itself, so it still stands out. In dark mode it keeps the usual look.
On a teal card, the pill turns pale by itself (light mode).
Page title pill
Section titled “Page title pill”A bigger, see-through relative for the top of a page or a hero photo. Page headers always carry a small eyebrow line above the title: the jaunt’s name (or your first name, on the home Dashboard).
Ski Trip 2027
Dashboard
Page header (size h3, 60px): with an eyebrow line above the title
Ski Trip 2027
Who
The Who page's header
Ski Trip 2027
Over a hero photo (size h4, 44px): the jaunt's name, see-through so the photo shows
| Size | Height | Used for |
|---|---|---|
| h3 | 60px, fully rounded | Page headers: Dashboard, Where, When, Who, Stay, How, Docs & Tix |
| h4 | 44px, 30px corners | The jaunt’s name over its hero photo, and the home page cards |
The title is one line and is cut off with “…” when it’s too long. It never wraps.
Anatomy
Section titled “Anatomy”| Part | Title pill | Page title pill |
|---|---|---|
| Height | 40px (Small: 26px) | 60px (h3) or 44px (h4) |
| Icon badge | A circle as tall as the pill, flush with its left edge | Same |
| Fill | Green, with a dark green badge | Green Dark, see-through (50–75%) |
| Label | H5 (Large: H4, Small: Body 2), white, one line | H3 or H4, mint |
| Shadow | shadow-elevated |
A softer 5% shadow |
The badge’s border sits exactly on top of the pill’s, so the two read as one outline, not two.
Do and don’t
Section titled “Do and don’t”Short labels
One to three words. The label never wraps, so a sentence runs off the card.
An action goes next to the pill, not inside it
Put a chevron, plus or close in a round icon button beside the pill.
Accessibility
Section titled “Accessibility”- The label is real text, read by screen readers. The icon in the badge is decoration.
- A page title pill’s eyebrow (the jaunt’s name) is read before the title.
Source
Section titled “Source”src/web/components/TitlePill.tsxsrc/web/components/PageTitlePill.tsx