Design system
Full-width page blocks built from components. Pages are assembled by stacking sections and setting their props. Documentation lands here as each section is locked.
Component
Section (group Sections). Root is a section tag with class section, holding container-large and a slot. Every page section is an instance of this with components dropped into the slot.
Variants
Dark (default) and Light. Light switches the variable mode on the section, so every token inside resolves to the light values with no other change.
Spacing
Space XL top and bottom on desktop, Space XXL from 1440px, Space L on tablet, Space M on mobile. Container is 1224px, 1320px from 1440px, with Space M side padding and Space S on mobile.
Rule
Sections carry no content styling. Layout inside the slot belongs to a component such as a grid or heading group.
Below: one Dark instance with a Section Header inside. Switch the Variant prop to Light in the Designer to preview the light theme.
For healthcare professionals
Search smarter, see everything upfront, and talk to employers directly. One profile, every role in the network.
Component
Section Hero. Section shell with the is-hero modifier (90vh, gradient + photo background) and a slot. Drop Hero Heading, Text Body Muted and the Search Bar component into the slot.
Rotating word
Lives in the Hero Heading component (Components page). Props: Prefix, Rotating Words (comma list) and Suffix. GSAP and SplitText load from the embed inside that component, so it animates wherever it is placed.
Variants
Dark only in practice. The Light variant exists from the shell but the photo background is designed for dark.
Below: the Hero shell with Hero Heading, Text Body Muted and Search Bar dropped into its slot, as used on Home.
Search thousands of healthcare roles, connect directly with employers, and grow your career. All in one network.
15,000
Physicians & HCPs
7,500
Clinics & Facilities
200,000
Job & Profile Views
20,000
Healthcare Jobs
Component
Section Stats. Compact section holding a ticker viewport; the slot is the moving track. Drop Ticker Item components into the slot.
Loop
The track scrolls left by half its width, so add each Ticker Item twice for a seamless loop. Hover pauses; reduced-motion shows a static centred row.
Below: Dark instance with the four network stats, duplicated for the loop.
10,000
Physicians & HCPs
7,500
Clinics & Facilities
200,000
Job & Profile Views
20,000
Healthcare Jobs
10,000
Physicians & HCPs
7,500
Clinics & Facilities
200,000
Job & Profile Views
20,000
Healthcare Jobs
Component
Section Logo Strip. Compact section; the slot is a centred wrapping row. Drop Logo components (Partner variant) into the slot.
Below: Dark instance with six partner logos.
Component
Section Segments. Section Header on top, then a three-column grid slot (one column on mobile). Drop Segment Card components into the slot.
Props
Header copy is set on the nested Section Header inside the section for now; forward props once the copy pattern settles.
Below: Dark instance with a Grid (Three columns) in the slot holding three Segment Cards. Switch the Grid to Two columns for two-up rows.
The network
Whether you're advancing your career, hiring your next team member, or partnering with the network, there's a place for you on Cherry.
Build a profile, follow clinics, and discover roles that match your specialty and lifestyle.
Learn morePost jobs, manage applicants, and reach a verified audience of healthcare professionals across Canada.
Learn moreConnect with the network through sponsorships, services, and co-marketing opportunities.
Learn moreComponent
Section Testimonials. Section Header, then a three-column grid slot (two on tablet, one on mobile). Drop Testimonial Card components into the slot.
Below: Dark instance with a Grid (Three columns) in the slot holding three Testimonial Cards.
Testimonials
“As a recent graduate it was a breeze to secure my first locum position, which only took a few days.”
“I can’t get over how efficient Cherry is for finding meaningful work. Within 2 weeks I found a position.”
“It was very easy to set up and we get more responses through Cherry than anywhere else.”
Component
Section Blog. Section Header, then a three-column grid slot (two on tablet, one on mobile). Drop Blog Card components into the slot; later this slot takes a Collection List bound to the CMS.
Below: Dark instance with a Grid (Three columns) in the slot holding three Blog Cards.
Component
Section FAQ. Centred Section Header, then a centred 820px list slot with a top rule. Drop FAQ Item components into the slot; each is a native details element so no script is needed.
Below: Dark instance with four questions.
Component
Section Newsletter. Centred Section Header and the Newsletter Form component. No slot; copy and button label live on the nested components.
Below: Dark instance.
Component
Section Footer. Section shell with the is-footer modifier (top rule, tighter padding). Top row: brand block (Logo, tagline, Social Links) plus a three-column grid slot for Footer Column components. Bottom row: copyright caption and legal links.
Below: Dark instance with three footer columns.
The Hub
Open any clinic's profile and tap Follow. New jobs and updates from that clinic then appear in your feed.
Use the Network tab to browse clinics by specialty, location, and the roles they're actively hiring for.
Yes. Creating a profile, following clinics, and applying to jobs is completely free for healthcare professionals.
Create an employer account, choose Post a Job, and your listing reaches our verified network of healthcare professionals.
Newsletter
Get new healthcare roles and hiring insights in your inbox. No spam, unsubscribe anytime.
The Healthcare Jobs Network. Find roles and connect with employers, all in one place.
Component
Section Navbar. Native Webflow navbar (w-nav) so the mobile menu toggle works. Fixed, frosted bar: site-nav > site-nav_container > site-nav_bar > brand link + menu (links + actions) + toggle.
Nested elements
Logo (Nav Full on desktop/tablet, Nav Mark on phones), 6 × Link (Navbar variant), Button (Nav Login, Nav Join).
Editing
Links and buttons are set once inside the component, so every page updates together. Link URLs use paths (/recruit, /for-business, /hub, /newsletter).
Variants
Dark only. Collapses to the menu panel at tablet and below.
Live at the top of this page. Replaces the legacy Navbar B.
Component
Section Pricing (group Sections)
Slots
Header (Section Header, Center) · Monthly grid · Yearly grid (Pricing Cards with Check Items)
Toggle
Monthly / Yearly buttons (data-pricing-btn). Site footer script initPricing flips data-pricing on the section; site head CSS shows the matching grid. No canvas embed.
Used on
Recruit
Live example below uses the Recruit plans. Keep both grids in the same card order so the toggle reads as a price change, not a layout change.
For healthcare professionals
Search smarter, see everything upfront, and talk to employers directly. One profile, every role in the network.
$19.99/ month
Short description of who this plan is for.
What's Included
Feature included
Feature included
Feature included
$19.99/ month
Short description of who this plan is for.
What's Included
Feature included
Feature included
Feature included
$19.99/ month
Short description of who this plan is for.
What's Included
Feature included
Feature included
Feature included
Component
Section CTA (group Sections)
Props
Show Eyebrow, Eyebrow, Heading Start, Accent Word, Heading End, Show Description, Description, Button Label, Button Link
Sibling
Same shell as Section Newsletter (is-cta background, centred Section Header). Newsletter has the email form, CTA has a Button.
Used on
For Business
Get started
Book a meeting with our team to see how Cherry Health can help.
Component
Section Sticky Features (group Sections)
Structure
Pinned image column (one visual per step, clip-path reveal) + text column (heading + body per step) + progress bar. Four steps.
Behaviour
Site footer initSticky: loads GSAP + ScrollTrigger only when [data-sticky-feature-wrap] exists. The style embed inside is Designer-only (stacks every step for editing); it holds no script.
Used on
For Business
Not previewed here because it pins the page while scrolling. See it live on For Business. Edit steps inside the component; keep the visual count equal to the text count.
