Halcyon Dental — Minimal Dental The Team Page for Divi 5
Meet the dentists and hygienists behind Halcyon Dental. A clean, minimal Divi 5 team page layout with staff profiles, founder bio, practice stats, and a hiring section.
Rate this element
Download this section, free
- Divi 5 JSON, imports in seconds
- Commercial license included
- No account needed
This page ships inside Halcyon: Dental Clinic Theme (6 Pages), 6 coherent pages that share one brand.
Click to view the full page
Overview
Halcyon Dental opens on a full-width section with a deep teal background (#10343a). An H4 eyebrow in Nunito uppercase sits above an H1 in Manrope 700 at 60px — scaling to 46px on tablet and 34px on phone — followed by a 72px-wide centred divider line as a deliberate typographic pause. A curve-shaped section divider (#eaf6f3, 100px on desktop, 44px on phone) sweeps the eye into the team grid below, making the transition feel like an architectural detail rather than a layout seam.
The team grid section uses pale mint (#eaf6f3) as its canvas. An asymmetric two-column intro row — weighted 14/24 left, 10/24 right, both bottom-aligned — separates the headline from the supporting sentence before the cards appear. The four dentist cards sit in an equal-columns-4 grid with 28px gutters. Each card pairs a 1:1 square image (sharp corners, no radius, object-fit: cover) with a 2px solid top-border nameplate group below: an H3 name in Manrope and an uppercase Nunito role label in muted teal. On tablet the grid folds to two columns; on phone each card runs full width.
The founder spotlight occupies a white section and deploys the most distinctive image treatment in the layout: the portrait is constrained to 360px wide and given 999px radius on the top corners (a pill arch) with 32px on the bottom. A 4:5 aspect ratio is locked in via Divi's native sizing, so the image fills the arch cleanly at any viewport. The right column gives the founder's words generous space: three paragraphs in Manrope at 22px / 1.6 line-height, closing with an italic signature in muted teal against the white background.
A stats strip on the same deep teal as the hero carries three figures rendered in Manrope at 96px with -2px letter-spacing — each preceded by a 2px horizontal line divider that anchors the number visually. The layout closes with a background-image section: a practice photograph sits beneath a left-anchored white card (520px max-width, 48px internal padding, 16px corner radius, 1px #cfe6e1 border) holding a recruitment message and a teal CTA button (#0f7c80, 12px radius).
What’s inside
- Dark-teal hero section (H4 eyebrow + H1 headline + centred 72px divider ornament) with a curve section-divider that sweeps into the team grid
- Four-column dentist card grid: 1:1 square images with sharp edges, 2px solid top-border nameplate, Manrope H3 name and Nunito uppercase role label per card
- Asymmetric intro row above the grid (14/24 headline column + 10/24 subtext column, bottom-aligned) using native Divi 5 flex layout settings
- Founder spotlight section: arch-shaped portrait (pill top radius, 32px bottom radius, 4:5 aspect ratio locked), three-paragraph bio at Manrope 22px, and italic signature
- Three-column stats strip on dark teal: oversized Manrope numerals at 96px, each anchored by a 2px line divider, collapsing to a single column on phone
- Background-image CTA section with a floating white recruitment card, interior divider rule, and a solid teal button with rounded corners
- Three-breakpoint responsive scaling throughout: section padding, font sizes, grid columns, and column stacking all have discrete tablet and phone values set
Who it’s for
The layout suits dental practices, GP clinics, physiotherapy studios, optometry centres, and specialist care providers where a named, photographed team is the main trust signal. The warm-but-restrained palette and editorial type scale position it toward practices that market on relationships rather than clinical procedure lists. The recruitment card makes it immediately useful for any healthcare business actively hiring. Freelance designers and agencies building healthcare websites will find the five-section structure, asymmetric column ratios, and pre-tuned responsive breakpoints a significant starting point over building from scratch.
Customization tips
The two-tone palette is controlled in four spots: the hero section background, the team-grid section background, the stats section background, and the text colour values on the card nameplates. Swapping all #10343a instances to a deep navy and all #eaf6f3 instances to a warm cream shifts the mood from coastal-clinical to warm-corporate without touching layout structure.
The 1:1 team card images expect square or squareable crops. Portrait headshots work because Divi centre-crops them, but very wide landscapes will lose the face. The founder portrait slot uses a 4:5 ratio, so a taller vertical headshot fits best and keeps the subject clear of the arch crop.
The stats section holds three figures with short labels. Keep each label to one line at most — Manrope at 96px takes up substantial horizontal space and the grid collapses to one column on phone, so label text that wraps awkwardly at mobile width is the most common editing issue here.
The team grid is configured for exactly four cards. Adding a fifth means duplicating a column and changing the row's flexColumnStructure value from equal-columns_4 to equal-columns_5. For teams of six or more, restructuring into two four-column rows is the cleaner approach.
How to install this layout
- Download the layout JSON file from this page.
- Open the target page in the Divi 5 builder.
- Open the portability panel (up/down arrows icon) and choose the Import tab.
- Upload the JSON. Tick “replace existing content” only for full-page imports.
- Check the page at desktop and mobile widths, then swap in your copy and images.
Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.
Questions about Halcyon Dental — Minimal Dental The Team Page for Divi 5
How does the four-column team grid handle different screen sizes?
The grid uses Divi 5's flex column structure set to equal-columns-4 with flexWrap: nowrap on desktop. On tablet it wraps to two columns (each card set to 12/24 flex width). On phone it stacks to a single full-width column. The 1:1 aspect ratio on each image is locked in the module's sizing settings, so portraits stay square at every breakpoint.
What aspect ratio should my founder portrait be?
The image module in the founder section has a 4:5 aspect ratio set natively, with object-fit: cover. A vertical headshot (portrait orientation, roughly 4 wide by 5 tall) works best. The top corners are set to 999px radius (pill arch) and the bottom to 32px, so make sure the subject's face sits in the upper-centre of the photo to avoid being cropped by the arch shape.
What is the curve shape between the hero and the team section?
It is Divi 5's native section bottom-divider set to the curve style on the hero section, 100px tall on desktop, 70px on tablet, 44px on phone. The divider colour is set to `#eaf6f3` to match the section below so it blends seamlessly. You can change the style or height in the hero section's Advanced > Dividers panel.
Can I remove the recruitment card section at the bottom?
Yes. The fifth section is entirely self-contained. Deleting it leaves a clean four-section team page. The background photograph is set directly on the section module's background settings, not as a separate image module, so there is nothing extra to clean up.
What fonts does the layout use, and do I need to install them?
Manrope (headings, stats figures, founder bio body text) and Nunito (labels, captions, secondary body copy). Both are Google Fonts and are set directly on each module in Divi 5's font picker, so they load automatically without any theme-level configuration. If your global theme font settings differ, the per-module overrides here will take precedence.
How do the stats figures behave on mobile?
The stats are laid out using Divi 5's native CSS grid set to three columns on desktop. On phone the grid collapses to a single column via a phone-breakpoint `gridColumnCount: 1` override. The font size on the figures drops from 96px to 64px on both tablet and phone via per-breakpoint size settings on each text module.
Which Divi version does this layout need?
Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.
Can I use this layout on client websites?
Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.
Included in these packs
More full landing pages
Browse all full landing pages
Kiln & Clay — Minimal Pottery_studio Visit Page for Divi 5
full_landing · pottery_studio · minimal

Kiln & Clay — Minimal Pottery_studio Our Story Page for Divi 5
full_landing · pottery_studio · minimal

Kiln & Clay — Minimal Pottery_studio Studio Membership Page for Divi 5
full_landing · pottery_studio · minimal

Kiln & Clay — Minimal Pottery_studio The Shop Page for Divi 5
full_landing · pottery_studio · minimal

Kiln & Clay — Minimal Pottery_studio Classes Page for Divi 5
full_landing · pottery_studio · minimal

Kiln & Clay — Minimal Pottery_studio Home Page for Divi 5
full_landing · pottery_studio · minimal

