Website kits
Dental clinic team page
Team page with three clinician cards (photo, name, role and short bio), a qualifications list, a three-photo clinic gallery and a booking link.
When to use it
People choose a dentist as much as a clinic, and many check who they will see before booking. This page introduces each clinician with a photo, their name and qualification letters, their role and two sentences about how they work. A separate qualifications section lists degrees and licenses in plain text, which is where a careful patient, or an insurer, looks for them. The gallery of the reception, a treatment room and the waiting area answers a quieter question: what the place looks like before you walk in. Swap in real portraits first; stock photos of smiling strangers undo the purpose of the page. Write each bio in the first person plural or the third person and keep it consistent, and check every qualification against the clinician’s license before publishing, since patients can look these up with the state dental board.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- Each team card holds exactly one image, one heading and one paragraph, so the three cards convert to Image Box widgets; keep the role inside the paragraph or the card stops qualifying.
- The three clinic photos are image-only children of one row, so they convert to a single Image Gallery widget; add or reorder photos in the gallery panel.
- The qualifications list converts to an Icon List with a bold name at the start of each row, and needs the “match Elementor icon library” icon option.
- The three-column team grid and the gallery stack to one column below 780px; portraits keep a fixed 340px height and crop with object-fit, so upload portrait-format photos.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dental clinic team page</title>
<style>
body{margin:0;font-family:'Inter',Arial,sans-serif;color:#263538;background:#ffffff}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;color:#0e4f55;margin:0 0 12px;letter-spacing:-.02em}
h1{font-size:46px;line-height:1.1}
h2{font-size:32px;line-height:1.2}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#263538}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.tint{background:#f2f5f5}
.head{background:#d6efe8}
.head-text{max-width:760px}
.lead{font-size:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.person{padding:0 0 24px;border-radius:18px;background:#ffffff;border:1px solid #d6efe8;overflow:hidden}
.person img{display:block;width:100%;height:340px;object-fit:cover;margin:0 0 20px}
.person h3{padding:0 24px}
.person p{padding:0 24px;margin:0;font-size:15px}
.creds-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.creds{display:flex;flex-direction:column;gap:16px}
.creds div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;padding:16px 18px;border-radius:12px;background:#ffffff}
.creds span:first-child{color:#0e4f55;font-weight:800}
.intro{max-width:680px;margin:0 0 30px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{display:block;width:100%;height:260px;object-fit:cover;border-radius:14px}
.close{text-align:center;background:#0e4f55}
.close h2,.close p{color:#ffffff}
.close .intro{margin:0 auto 22px}
.button{display:inline-block;padding:14px 24px;border-radius:10px;border:2px solid #e07a52;background:#e07a52;color:#263538;text-decoration:none;font-weight:700;font-size:15px}
@media(max-width:780px){section{padding:50px 0}h1{font-size:33px}h2{font-size:26px}.grid3,.gallery,.creds-grid{grid-template-columns:1fr;gap:22px}.gallery img{height:220px}.lead{font-size:17px}}
</style>
</head>
<body>
<section class="head">
<div class="wrap">
<div class="head-text">
<h1>The people you will see</h1>
<p class="lead">Linden Row is a small practice. Most patients see the same dentist and hygienist at every visit, so it helps to know who they are before you come in.</p>
</div>
</div>
</section>
<section>
<div class="wrap grid3">
<article class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/dentist-raman.jpg" width="1000" height="1250" alt="Portrait of a woman dentist with dark hair in a teal tunic, standing in a clinic corridor"><h3>Dr. Priya Raman, DMD</h3><p>Family dentist. Sees patients from toddlers to grandparents and handles most of our fillings, crowns and root canal treatment. Known for explaining X-rays slowly.</p></article>
<article class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/dentist-hale.jpg" width="1000" height="1250" alt="Portrait of a gray-haired man dentist in a white coat, smiling in front of a light wall"><h3>Dr. Thomas Hale, DDS</h3><p>Dentist with a focus on orthodontics. Plans clear aligner and braces cases and runs the Tuesday and Thursday early clinics for working patients.</p></article>
<article class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/hygienist-ellis.jpg" width="1000" height="1250" alt="Portrait of a young dental hygienist with short curly hair in mint scrubs, arms folded"><h3>Jordan Ellis, RDH</h3><p>Registered dental hygienist. Does most of our cleanings and gum care, and is the person to ask about brushing and flossing for braces.</p></article>
</div>
</section>
<section class="tint">
<div class="wrap creds-grid">
<div>
<h2>Qualifications and licenses</h2>
<p>Every clinician here holds a current Oregon license for the work they do, and completes continuing education each year as the state dental board requires.</p>
<p>License details can be checked with the board at any time. We are happy to answer questions about anyone’s training.</p>
</div>
<div class="creds">
<div><span>✓</span><span><strong>Dr. Priya Raman, DMD:</strong> Doctor of Dental Medicine, followed by a one-year general practice residency.</span></div>
<div><span>✓</span><span><strong>Dr. Thomas Hale, DDS:</strong> Doctor of Dental Surgery, with a postgraduate certificate in orthodontics.</span></div>
<div><span>✓</span><span><strong>Jordan Ellis, RDH:</strong> registered dental hygienist with a local anesthesia permit.</span></div>
<div><span>✓</span><span><strong>Front desk team:</strong> trained in insurance billing and in first-response guidance for dental emergencies.</span></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="intro">
<h2>Inside the clinic</h2>
<p>Three treatment rooms, a quiet waiting area and step-free access from the parking lot.</p>
</div>
<div class="gallery">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/reception.jpg" width="1600" height="1000" alt="Clinic reception desk in pale wood with mint accents and a teal wall behind it">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/treatment-room.jpg" width="1600" height="1000" alt="Empty modern dental treatment room with a mint-colored chair and a window with daylight">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/clinic/waiting-area.jpg" width="1200" height="1200" alt="Quiet waiting area with gray armchairs, a low table and plants beside a large window">
</div>
</div>
</section>
<section class="close">
<div class="wrap">
<div class="intro">
<h2>Want to see someone in particular?</h2>
<p>Name the dentist or hygienist when you request an appointment and we will book you with them where we can.</p>
</div>
<a class="button" href="#appointment">Request an appointment</a>
</div>
</section>
</body>
</html>