Features & content
Team grid with photos
Four team members in a row, each card with a portrait photo, a name heading and one line on what that person does.
When to use it
TODO
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
- TODO
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>Team grid with photos</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#fff}
.team{max-width:1160px;margin:0 auto;padding:76px 24px}
.head{max-width:660px;margin:0 0 40px}
.eyebrow{margin:0 0 12px;color:#ff5b35;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h2{margin:0 0 14px;font-size:38px;line-height:1.12;letter-spacing:-.03em}
.intro{margin:0;color:#5b6b82;font-size:16.5px;line-height:1.8}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{margin:0}
.member img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:#e3e9f1;margin:0 0 18px}
.member h3{margin:0 0 6px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.member p{margin:0;color:#5b6b82;font-size:14.5px;line-height:1.7}
@media(max-width:780px){.team{padding:54px 20px}h2{font-size:29px}.head{margin-bottom:30px}.grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}.member img{margin-bottom:14px}.member h3{font-size:16px}.member p{font-size:13.5px;line-height:1.65}}
</style>
</head>
<body>
<section class="team">
<div class="head">
<p class="eyebrow">Who you’ll work with</p>
<h2>The four people on every Fernhill project</h2>
<p class="intro">From the first visit to the final walkthrough, your renovation is run by the same small team. You get each person’s direct number on day one, so you never explain the job twice.</p>
</div>
<div class="grid">
<article class="member">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/team-project-lead.jpg" width="1000" height="1250" alt="Woman in her fifties with short grey hair and a navy work jacket, standing in a bright renovated kitchen">
<h3>Dana Whitfield</h3>
<p>Project lead. Prices the job, writes your schedule and runs the weekly site meeting.</p>
</article>
<article class="member">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/team-site-manager.jpg" width="1000" height="1250" alt="Man in his forties wearing a grey work shirt and safety glasses pushed up on his head, holding a tape measure">
<h3>Marcus Bell</h3>
<p>Site manager. On site every working day and the person who locks up at night.</p>
</article>
<article class="member">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/team-interior-designer.jpg" width="1000" height="1250" alt="Woman in her thirties with long dark hair holding fabric and tile samples at a large worktable">
<h3>Priya Raman</h3>
<p>Interior designer. Helps you choose finishes and orders them early enough to arrive on time.</p>
</article>
<article class="member">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/team-client-coordinator.jpg" width="1000" height="1250" alt="Young man with curly hair and a light blue shirt smiling at a desk with a laptop and a printed project calendar">
<h3>Tom Esposito</h3>
<p>Client coordinator. Sends the Friday update and answers questions about invoices.</p>
</article>
</div>
</section>
</body>
</html>