Website kits
Restaurant about page
Restaurant about page with an intro, the founding story, three team cards, four supplier cards and a private dining section with key facts.
When to use it
The page for guests deciding whether you are their kind of place, and for anyone planning a group dinner. It opens with what the room is — seats, kitchen, who works there — because that tells a visitor more than a mission statement. The founding story is short and specific. The team cards put faces and names to the kitchen, which matters in a restaurant where the cooking is the reason to come. Suppliers come next, named one by one: if you buy locally, saying exactly from whom is what makes the claim believable. Private dining closes the page with the facts a group organizer needs — capacity, price per head, days — and a button straight to the booking form. Replace the team photos and names first, then the supplier list, naming only suppliers who are happy to be named. Update the private dining price whenever the set menu changes, because it is the number people quote back when they call.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 14
- Container (grid) × 2
- Container (grid, 3 columns) × 1
- Container (grid, 2 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 11
- Heading × 5
- Image × 2
- Image Box × 3
- Icon Box × 4
- Icon List × 1
- Button × 1
Things worth knowing
- The three team 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 four supplier cards convert to Icon Box widgets with a check icon, because each holds one glyph, one heading and one paragraph.
- The private dining facts become an Icon List widget. The intro and private dining photos become Image widgets with empty image slots, so select your own photos from the Media Library after import.
- Both two-column sections stack below 780px, with the text first in the intro and the photo first in private dining, following the source order.
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>About — Linden & Salt</title>
<style>
body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#231f1b;background:#f6efe3}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:#231f1b;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.02em;margin:0 0 18px}
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.75;color:#6e6358;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a64b2f;margin:0 0 14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.photo{width:100%;height:480px;object-fit:cover;border-radius:6px;display:block;background:#e9dcc6}
.head{max-width:640px;margin:0 0 40px}
.sand{background:#e9dcc6}
.story{max-width:780px}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.person img{width:100%;height:380px;object-fit:cover;border-radius:6px;display:block;margin:0 0 18px;background:#e9dcc6}
.person p{font-size:16px;margin:0}
.farms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.farm{padding:26px 28px;border:1px solid #e9dcc6;border-radius:6px;background:#f6efe3}
.farm-icon{display:inline-block;color:#5f6234;font-size:22px;line-height:1;margin:0 0 12px}
.farm h3{font-size:19px}
.farm p{font-size:16px;margin:0}
.dark{background:#231f1b}
.dark h2{color:#f6efe3}
.dark p{color:#e9dcc6}
.dark .eyebrow{color:#e9dcc6}
.facts{display:flex;flex-direction:column;gap:10px;margin:6px 0 28px}
.facts > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#f6efe3}
.tick{color:#e9dcc6;font-size:15px}
.button{display:inline-block;padding:15px 28px;border-radius:999px;background:#a64b2f;color:#f6efe3;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.03em}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.split,.team,.farms{grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:36px}
h2{font-size:28px}
.photo{height:300px}
.person img{height:340px}
}
</style>
</head>
<body>
<section>
<div class="wrap split">
<div>
<p class="eyebrow">About Linden & Salt</p>
<h1>Cooked by people you can see from your table</h1>
<p>We are a 48-seat bistro with an open kitchen, a wood oven and a bar that seats eight. Two cooks, a pastry chef and a front-of-house team of five run the room every night we are open.</p>
<p>We try to be the place you come to on an ordinary weeknight, not just for anniversaries.</p>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/kitchen-pass.jpg" width="1000" height="1250" alt="Chef plating a dish at the kitchen pass under warm lights">
</div>
</section>
<section class="sand">
<div class="wrap">
<div class="head story">
<p class="eyebrow">How it started</p>
<h2>From twelve chairs to Larkspur Row</h2>
<p>Linden & Salt started in 2019 as a Friday supper club in a borrowed community kitchen: one set menu, twelve guests, and a waiting list that grew faster than we could cook for it.</p>
<p>When the old hardware store on Larkspur Row came up for lease, we kept the brick walls and the long counter, built the kitchen into the middle of the room and opened with the same rule we started with — cook what is in season, and tell people where it came from.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">The team</p>
<h2>Who is cooking tonight</h2>
</div>
<div class="team">
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/chef-head.jpg" width="1000" height="1250" alt="Head chef in a canvas apron standing in the open kitchen">
<h3>Elena Varga, head chef</h3>
<p>Cooked in country inns and city kitchens for twelve years before the supper club. Writes the menu every Monday after the farm calls.</p>
</article>
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/chef-pastry.jpg" width="1000" height="1250" alt="Pastry chef rolling out tart dough on a floured marble counter">
<h3>Tom Okafor, pastry chef</h3>
<p>Bakes the tarts, the ice creams and the staff bread. Ask about the honey tart and he will tell you about the bees.</p>
</article>
<article class="person">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/host-manager.jpg" width="1000" height="1250" alt="Restaurant manager welcoming guests at the front of a warmly lit dining room">
<h3>Ruth Linden, general manager</h3>
<p>Runs the floor, the wine list and the bookings. If your table needs anything unusual, she is the person to email.</p>
</article>
</div>
</div>
</section>
<section class="sand">
<div class="wrap">
<div class="head">
<p class="eyebrow">Where it comes from</p>
<h2>Our farms and suppliers</h2>
<p>Around 80% of what we cook is grown or raised within a two-hour drive. These are the people we buy from every week.</p>
</div>
<div class="farms">
<div class="farm"><span class="farm-icon">✓</span><h3>Hollow Creek Farm</h3><p>Vegetables, herbs and salad leaves, picked the morning they are delivered. The menu is written around their list.</p></div>
<div class="farm"><span class="farm-icon">✓</span><h3>Ashby Ridge Sheep Co.</h3><p>Pasture-raised lamb and the aged sheep’s cheese on the agnolotti, from a family farm in the hills north of town.</p></div>
<div class="farm"><span class="farm-icon">✓</span><h3>Rye & Hearth Bakery</h3><p>Our bread, baked overnight two streets away. We pick it up warm before every service.</p></div>
<div class="farm"><span class="farm-icon">✓</span><h3>Day boat fishermen</h3><p>Whatever the small boats land that morning, which is why the fish on the menu changes daily.</p></div>
</div>
</div>
</section>
<section class="dark" id="private">
<div class="wrap split">
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/restaurant/dining-room.jpg" width="1600" height="1000" alt="Warm bistro dining room at dusk with wooden tables, candles and a long bar">
<div>
<p class="eyebrow">Private dining</p>
<h2>The back room, for up to 14 guests</h2>
<p>Our back room has one long table under the old skylight. We build a shared menu with you a week ahead and pair wines if you like.</p>
<div class="facts">
<div><span class="tick">✓</span><span>Seats 8 to 14 at one table</span></div>
<div><span class="tick">✓</span><span>Set menus from $65 per guest</span></div>
<div><span class="tick">✓</span><span>Available Tuesday to Sunday, lunch or dinner</span></div>
</div>
<a class="button" href="/contact/#book">Ask about private dining</a>
</div>
</div>
</section>
</body>
</html>