Design system
Built from elements. A component owns its layout, nests element instances, and exposes props that flow down to them. Documentation lands here as each component is locked.
Eyebrow + Heading H2 + Text Body Muted. Props: Eyebrow, Heading Start, Accent Word, Heading End, Description, Show Eyebrow, Show Description. Variants: Left, Center. The heading is the one place text is owned by the component, so the accent word can sit inline.
For healthcare professionals
Search smarter, see everything upfront, and talk to employers directly. One profile, every role in the network.
Center variant, light theme
Whether you're advancing your career, hiring your next team member, or partnering with the network.
Icon Arrow Small + Stat Number + Text Small Muted. Props: Number, Label. Used in the hero ticker marquee and stat rows.
15,000
Physicians & HCPs
15,000
Physicians & HCPs
Image Portrait as background + Heading H4 + Text Body + Button Text Link. Props: Image, Title, Description, Link Label, Link URL. Text is always white over the photo gradient, in both themes.
Build a profile, follow clinics, and discover roles that match your specialty.
Learn morePost jobs, manage applicants, and reach a verified audience of healthcare professionals.
Learn moreCard background, border and hover lift. Nests the Person component (avatar, name, role) above a Text Body Muted quote. Props: Photo, Alt, Name, Role, Quote, forwarded into Person.
As a recent graduate it was a breeze to secure my first locum position.
I can't get over how efficient Cherry is for finding meaningful work. Within two weeks I found an interesting job within walking distance from my house.
Image Landscape + Eyebrow Accent + Text Caption Muted + Heading H4 + Text Body Muted + Button Text Link. Props: Image, Alt, Category, Date, Title, Excerpt, Link URL. Every prop maps to a CMS field later.
Native details and summary. Heading H4 + Icon Chevron in the summary, Text Body Muted as the answer. Props: Question, Answer. No interactions runtime, the browser handles open and close.
Cherry Health connects clinics and healthcare professionals across Canada. Post a role, browse opportunities, and manage everything from one place.
Cherry Health connects clinics and healthcare professionals across Canada. Post a role, browse opportunities, and manage everything from one place.
Eyebrow + four Link Small. Props: Heading, Link 1 to 4 labels and URLs, Show Link 4. Three columns make the footer link block.
Three circular link blocks holding Icon LinkedIn, Icon X and Icon Instagram. Props: LinkedIn URL, X URL, Instagram URL. Icons inherit the theme colour and turn accent on hover.
Glass panel (search-bar) holding a flex form (search-bar_form) with two raw text fields (form-input + is-on-dark, names what / where) and a submit button. Prop: Button Label. Placeholders live on the fields. Designed for photo/dark backgrounds — the light panel shows it out of context. Stacks vertically on mobile.
Flex form (newsletter-form_form) with one required email field (token-based form-input, follows the theme) and a submit button. Prop: Button Label. Stacks vertically on mobile.
Avatar + name (Text Body Strong) + role (Text Small Muted) in a row. Props: Photo, Alt, Name, Role. Nested inside Testimonial Card; reuse for authors, team members and speakers.
Layout component that goes inside a section slot and holds cards. Variants: Three columns (default, two on tablet, one on mobile) and Two columns (one on mobile). Drop any cards into its slot.
Heading H1 with the rotating word (Osmo pattern). Props: Prefix, Rotating Words (comma list), Suffix. The rotation script lives in site custom code (loads GSAP only when a rotating heading exists), so the component works anywhere it is dropped. Used in the Hero section slot.
Check List (slot, display contents) holds Check Item instances. Check Item = pink check icon + text, prop: Text. Used in Feature Panel (Image variant) and inside every Pricing Card feature list.
Feature included
Stat = Stat Number (Large variant) + uppercase label. Props: Number, Label. Stat Group lays Stats out in a row (slot, display contents). Sized down from the legacy Recruit stats.
15,000+
Healthcare professionals
Bordered panel with Title, Description (Show Description toggle) and a content slot for Stat Group, Check List or a Text Link. Variants: Text (default), Image (full-bleed background photo with overlay; props Image, Image Alt), Split (image half + body half; spans two grid columns, stacks on mobile). Use inside Grid (Two columns).
Short supporting description for this panel.
Plan card: Price + Cents + Period, Title, Description, Features Label, feature list slot (Check Items) and a full-width CTA. Props: Price, Cents, Period, Title, Description, Features Label, Badge, Button Label, Button Link. Variants: Default, Featured (pink border + glow + Badge). Section Pricing holds two card grids (Monthly / Yearly) switched by the site-wide pricing toggle script.
$19.99/ month
Short description of who this plan is for.
What's Included
Linked card: white logo tile + partner name (h3) + eyebrow, with a Learn more overlay on hover (site head CSS). Props: Logo, Logo Alt, Name, Eyebrow, Link. On the Hub every card sits in a Partnerships collection list with Logo, Logo Alt and Name bound to the CMS Logo/Name fields and Link bound to Page Link. Note: whole sections holding collection lists cannot become components (Webflow limit), so the Hub directory stays page-level and reuses this card.
Grid card for partner pages (Partnerships template, inside the main content box, outline only), 2 to 4 per row. Props: Title, Text, Icon, Image, Stat Value, Link. Variants: Feature (icon + title + text), Stat (big brand-coloured number + label + text), Team (round photo + name + role), Image (full uncropped image on top + title + text), Text (title + text). On the template the Partner Cards collection drives it: cards sharing a Group Title and Order render as one grid under that title, Style maps to the variant via .is-feature / .is-stat / .is-team / .is-image / .is-text, columns follow the card count (3, or 4 for multiples of 4). Icon Style = White Circle puts a dark partner icon on a white disc. Links open in a new tab.
Icon + title + text. Icon comes from the Partner Cards Icon field; without an icon the card is title + text.
78%
Big brand-coloured number + label + optional text.
Round photo (Image field) + name + role, centred.
Photo on top (Image field) + title + text.
Title + text only. Used for ClinicLine's three intro cards.
Partner page content block (Partnerships template, inside the main content box after the body copy, separated by hairline dividers). Title + rich text (paragraphs, bullet lists rendered as a check list in the partner's brand colour) + optional text-link CTA, with an optional image or 16:9 video beside the text. Props: Title, Content, Image, Image Alt, Video, CTA Label, CTA Link. Variants: Text Only, Image Left, Image Right. On the template the Partner Sections collection drives it: Layout maps to the variant via the .is-image-left / .is-image-right combos and Image Height sets data-img-height (Match Text for portraits, Short / Medium / Tall fixed, Auto for wide screenshots). Order is shared with Partner Cards so sections and card groups interleave. Hidden when the partner has no sections.
Base variant: title + rich text spanning the full column. Bullet lists in the Content field render as a check list with the partner's brand colour.
Optional CTA Label + CTA Link add a text-link button under the copy.
Image Left variant: media column (5/12) before the text. Image Height on the CMS record sets Match Text / Short / Medium / Tall / Auto.
