Website kits
Salon team page
Salon team page with three stylist cards, a treatment-room note, three price-level cards and a training and products section with a booking button.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page for clients choosing who to book, and for anyone wondering why one stylist costs more than another. Three stylist cards come first, each with a photo, a name and role, and the work that person is best at, because most clients choose by specialty — curls, blondes, short cuts — rather than by job title. A short panel names the treatment-room therapists so skin and nail clients are not left out. The level cards then explain the price difference in plain numbers, which saves the desk from explaining it on the phone. Training and products close the page, answering two quiet worries: whether juniors practice on paying clients, and whether there will be pressure to buy at the till. Swap in your own team photos first; clients like to recognize the person who greets them. Keep the level surcharges identical to the services page, since clients will compare the two.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 11
- Container (grid, 3 columns) × 2
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 9
- Heading × 4
- Image Box × 3
- Icon Box × 3
- Image × 1
- Icon List × 1
- Button × 1
Things worth knowing
- The three stylist cards each contain one image, one heading and one paragraph, so they convert to Image Box widgets; keep the role in the heading as here, because an extra line would stop the card qualifying.
- The three level cards convert to Icon Box widgets with open circle, bullseye and filled circle icons; the training checklist becomes an Icon List widget with check icons.
- The products photo becomes an Image widget and the stylist cards keep empty image slots; select your own photos from the Media Library after import.
- Below 780px the stylist cards, the level cards and the photo-and-text section all stack to one column, with the products photo above its text.
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>Our team — Linnea Hair & Skin</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2f2635;background:#faf8f5}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#2f2635;font-weight:600}
h1{font-size:52px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:36px;line-height:1.2;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 6px}
p{font-size:17px;line-height:1.7;color:#6d6570;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4e6e61;margin:0 0 14px}
.intro{padding:64px 0 40px}
.intro .lead{max-width:700px;font-size:18px;margin:0}
.people-sec{padding-top:16px}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.person img{width:100%;height:400px;object-fit:cover;border-radius:16px;display:block;margin:0 0 18px;background:#ede6dc}
.person p{font-size:16px;margin:0}
.rooms{margin:40px 0 0;padding:26px 30px;border-radius:14px;background:#dfe8e2}
.rooms h3{font-size:19px}
.rooms p{margin:0;font-size:16px;color:#2f2635}
.oat{background:#ede6dc}
.head{max-width:680px;margin:0 0 36px}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.level{padding:30px 28px;border-radius:14px;background:#faf8f5}
.level-icon{display:inline-block;color:#4e6e61;font-size:24px;line-height:1;margin:0 0 14px}
.level h3{font-size:20px}
.level p{font-size:15px;margin:0}
.small{margin:28px 0 0;font-size:15px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.photo{width:100%;height:460px;object-fit:cover;border-radius:16px;display:block;background:#ede6dc}
.facts{display:flex;flex-direction:column;gap:10px;margin:4px 0 28px}
.facts > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2f2635}
.tick{color:#4e6e61;font-size:15px}
.button{display:inline-block;padding:15px 28px;border-radius:10px;background:#4e6e61;color:#faf8f5;text-decoration:none;font-weight:700;font-size:16px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 24px}
.people-sec{padding-top:8px}
h1{font-size:38px}
h2{font-size:28px}
.team,.levels,.split{grid-template-columns:minmax(0,1fr);gap:28px}
.levels{gap:18px}
.person img{height:380px}
.rooms{padding:22px 20px}
.photo{height:300px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">The team</p>
<h1>The people behind the chair</h1>
<p class="lead">Seven stylists and two therapists, each with things they are especially good at. Below are the three who lead cutting, color and styling. Book with someone by name, or choose “first available” and the desk will match you to the right person for the service.</p>
</div>
</section>
<section class="people-sec">
<div class="wrap">
<div class="team">
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/stylist-ada.jpg" width="1000" height="1250" alt="Creative director in a sage linen shirt standing by a styling chair in the bright salon">
<h3>Ada Moreno, creative director</h3>
<p>Precision bobs, curly cuts and big restyles. Fourteen years behind the chair, and she trains the junior team every Monday.</p>
</article>
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/stylist-jonah.jpg" width="1000" height="1250" alt="Senior colorist in a dark apron mixing color in a bowl at the salon color bar">
<h3>Jonah Reyes, senior colorist</h3>
<p>Balayage, color correction and blending gray. Ask him about taking box dye back to something softer.</p>
</article>
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/stylist-mei.jpg" width="1000" height="1250" alt="Stylist finishing a smooth blow-dry with a round brush at her station">
<h3>Mei Tanaka, stylist</h3>
<p>Blow-dries, occasion hair and short cuts. Joined us after finishing our two-year apprenticeship.</p>
</article>
</div>
<div class="rooms">
<h3>In the treatment rooms</h3>
<p>Sofia Lind and Grace Obi are licensed estheticians and nail technicians. Facials, nails, brows and tints are priced the same whichever of them you see.</p>
</div>
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">How our prices work</p>
<h2>Three levels, one standard</h2>
<p>Every stylist is fully qualified. The level reflects experience and how busy their column is, so you can choose by budget or by who you want.</p>
</div>
<div class="levels">
<div class="level"><span class="level-icon">○</span><h3>Stylist</h3><p>Prices exactly as on the price list. Usually the easiest to book at short notice, including Saturday mornings.</p></div>
<div class="level"><span class="level-icon">◎</span><h3>Senior stylist</h3><p>Add $12 to cuts and $20 to color. Five or more years of experience and a specialty such as curls or blondes.</p></div>
<div class="level"><span class="level-icon">●</span><h3>Creative director</h3><p>Add $24 to cuts and $35 to color. Our most experienced stylists, who also train and check the work of the team.</p></div>
</div>
<p class="small">Treatment room services are the same price whoever you book. If you move up a level, your stylist will tell you before the appointment.</p>
</div>
</section>
<section>
<div class="wrap split">
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/salon/products.jpg" width="1200" height="1200" alt="Unlabeled amber and frosted glass bottles of hair care products on a light oak shelf">
<div>
<p class="eyebrow">Training and products</p>
<h2>Still learning, every week</h2>
<p>Monday is our closed training day. Juniors practice on models, and the whole team takes outside courses in cutting and color twice a year.</p>
<p>We use a small range of salon products chosen for how they perform rather than for the label, and we will never push you to buy anything at the desk.</p>
<div class="facts">
<div><span class="tick">✓</span><span>Two-year apprenticeship before anyone takes clients</span></div>
<div><span class="tick">✓</span><span>Vegan and fragrance-free options for every service</span></div>
<div><span class="tick">✓</span><span>Refillable bottles for shampoo and conditioner</span></div>
</div>
<a class="button" href="/book/">Book with your stylist</a>
</div>
</div>
</section>
</body>
</html>
