Website kits
Hotel rooms and rates page
Rooms page with four room types, each with a photo, size, bed, occupancy, from-price, in-room list and booking button, plus a rates and cancellation section.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page guests study hardest before they book, often comparing it side by side with a booking site listing. Each room type gets the same fixed pattern — photo, how many rooms and which floor, a short honest description, size, bed and occupancy, the from-price, three things in the room and a button — so a visitor can compare four rooms by scanning down one column. The floor line is there on purpose: in an old house without an elevator, stairs are a reason to book or not, and saying so early avoids an awkward arrival. The rates section that follows explains what the from-price means, what breakfast covers, the cancellation window and any minimum stay, then a dark prompt offers help choosing. Replace the photos, sizes and prices first. Quote room sizes in the unit your guests use and measure them yourself; a listed size that turns out generous is a common complaint in reviews.
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) × 4
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 22
- Heading × 7
- Image × 4
- Icon List × 8
- Button × 5
- Icon Box × 3
Things worth knowing
- Each room converts to a two-column Container with an Image widget, a Heading, Text Editors for the description and price, two Icon List widgets (size, bed and occupancy, then in-room items) and a Button — eight Icon Lists across the four rooms.
- There is deliberately no comparison table: the specs are Icon List rows, so the page converts with no HTML widget apart from the scoped CSS and every figure stays editable in the panel.
- The three rates and policies cards convert to Icon Box widgets with check, undo and circle icons.
- Below 780px each room stacks with the photo above the details, and the size, bed and occupancy row wraps onto two lines when it needs to.
- Choose “match the Elementor icon library” in the Icons option. The ✓, ● and → rows only become Icon List and Icon Box widgets in that mode; otherwise they arrive as plain 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>Rooms and rates — Calder House</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2b2430;background:#f7f2ea}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Cormorant Garamond',Garamond,Georgia,serif;color:#2b2430;font-weight:600}
h1{font-size:58px;line-height:1.06;letter-spacing:-.01em;margin:0 0 18px}
h2{font-size:40px;line-height:1.12;margin:0 0 12px}
h3{font-size:24px;line-height:1.25;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6b5f62;margin:0 0 16px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8f4a4a;margin:0 0 14px}
.button{display:inline-block;padding:14px 28px;border-radius:3px;background:#8f4a4a;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.intro{padding:64px 0 24px}
.intro .lead{max-width:700px;font-size:18px}
.list{padding-top:32px}
.room{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;padding:0 0 64px;margin:0 0 64px;border-bottom:1px solid #ebe1d3}
.room.last{border-bottom:0;margin-bottom:0;padding-bottom:0}
.room-img{width:100%;height:480px;object-fit:cover;display:block;background:#ebe1d3}
.specs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:4px 0 22px;padding:14px 0;border-top:1px solid #ebe1d3;border-bottom:1px solid #ebe1d3}
.specs > div{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;color:#2b2430}
.dot{color:#7d8a6e;font-size:9px}
.price{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:28px;font-weight:600;color:#8f4a4a;margin:0 0 18px}
.label{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#2b2430;margin:0 0 12px}
.amen{display:flex;flex-direction:column;gap:9px;margin:0 0 28px}
.amen > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2b2430}
.tick{color:#7d8a6e;font-size:14px}
.oat{background:#ebe1d3}
.head{max-width:660px;margin:0 0 40px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rule{padding:28px 26px;background:#f7f2ea}
.rule-icon{display:inline-block;color:#8f4a4a;font-size:20px;line-height:1;margin:0 0 14px}
.rule p{font-size:15px;margin:0}
.small{max-width:780px;margin:36px 0 0;font-size:15px}
.cta{background:#2b2430;text-align:center}
.cta h2{color:#f7f2ea}
.cta p{color:#ebe1d3;max-width:600px;margin:0 auto 26px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 12px}
.list{padding-top:20px}
h1{font-size:40px}
h2{font-size:32px}
.room{grid-template-columns:minmax(0,1fr);gap:24px;padding:0 0 48px;margin:0 0 48px}
.room-img{height:280px}
.specs{gap:8px 18px}
.rules{grid-template-columns:minmax(0,1fr);gap:16px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Rooms and rates</p>
<h1>Sixteen rooms in four types</h1>
<p class="lead">All rooms have a private bathroom, a desk, a kettle with real coffee and tea, blackout curtains and windows that open. Prices are per room per night for two guests, with breakfast included.</p>
</div>
</section>
<section class="list">
<div class="wrap">
<article class="room" id="garden-double">
<img class="room-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-garden.jpg" width="1200" height="1200" alt="Calm double bedroom with a linen-covered queen bed, an oak side table and a window onto a green walled garden">
<div>
<p class="eyebrow">Six rooms · ground floor</p>
<h2>Garden Double</h2>
<p>Our quietest rooms, at the back of the house, each with a window or a glazed door onto the walled garden. Step-free from the front door, so they suit anyone who would rather avoid stairs.</p>
<div class="specs">
<div><span class="dot">●</span><span>210 sq ft</span></div>
<div><span class="dot">●</span><span>Queen bed</span></div>
<div><span class="dot">●</span><span>Up to 2 guests</span></div>
</div>
<p class="price">From $165 per night</p>
<p class="label">In the room</p>
<div class="amen">
<div><span class="tick">✓</span><span>Walk-in rainfall shower</span></div>
<div><span class="tick">✓</span><span>Garden access from two of the six rooms</span></div>
<div><span class="tick">✓</span><span>Step-free route, one room with grab rails</span></div>
</div>
<a class="button" href="/contact/#book">Ask for a Garden Double</a>
</div>
</article>
<article class="room" id="courtyard-twin">
<img class="room-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-twin.jpg" width="1200" height="1200" alt="Twin bedroom with two single beds under white quilts, a painted chest of drawers and a window onto a cobbled courtyard">
<div>
<p class="eyebrow">Three rooms · second floor</p>
<h2>Courtyard Twin</h2>
<p>Two single beds that we can zip together into a king if you ask when booking. These rooms look over the cobbled courtyard and get the morning sun.</p>
<div class="specs">
<div><span class="dot">●</span><span>240 sq ft</span></div>
<div><span class="dot">●</span><span>Two single beds</span></div>
<div><span class="dot">●</span><span>Up to 2 guests</span></div>
</div>
<p class="price">From $175 per night</p>
<p class="label">In the room</p>
<div class="amen">
<div><span class="tick">✓</span><span>Bath with an overhead shower</span></div>
<div><span class="tick">✓</span><span>Beds made up as a twin or a king</span></div>
<div><span class="tick">✓</span><span>Writing desk and reading lamps on both sides</span></div>
</div>
<a class="button" href="/contact/#book">Ask for a Courtyard Twin</a>
</div>
</article>
<article class="room" id="harbor-king">
<img class="room-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-harbor.jpg" width="1200" height="1200" alt="Bright bedroom with a king bed and a cushioned window seat overlooking harbor rooftops and the sea">
<div>
<p class="eyebrow">Five rooms · third floor</p>
<h2>Harbor View King</h2>
<p>The rooms most guests ask for: a king bed facing a deep window seat with a view over the rooftops to the harbor. Two flights of stairs and no elevator, as in most houses of this age.</p>
<div class="specs">
<div><span class="dot">●</span><span>280 sq ft</span></div>
<div><span class="dot">●</span><span>King bed</span></div>
<div><span class="dot">●</span><span>Up to 2 guests</span></div>
</div>
<p class="price">From $215 per night</p>
<p class="label">In the room</p>
<div class="amen">
<div><span class="tick">✓</span><span>Window seat with a sea view</span></div>
<div><span class="tick">✓</span><span>Bathroom with a double vanity and shower</span></div>
<div><span class="tick">✓</span><span>Binoculars and a tide table by the window</span></div>
</div>
<a class="button" href="/contact/#book">Ask for a Harbor View King</a>
</div>
</article>
<article class="room last" id="loft-suite">
<img class="room-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/room-loft.jpg" width="1200" height="1200" alt="Spacious attic suite under sloping beamed ceilings with a king bed, a sofa and a freestanding bathtub">
<div>
<p class="eyebrow">Two suites · top floor</p>
<h2>Loft Suite</h2>
<p>The old attic, opened up under the original beams. A king bed, a sitting area with a sofa bed and a freestanding bath under the skylight. The only rooms that take children over two.</p>
<div class="specs">
<div><span class="dot">●</span><span>420 sq ft</span></div>
<div><span class="dot">●</span><span>King bed and sofa bed</span></div>
<div><span class="dot">●</span><span>2 adults and 2 children</span></div>
</div>
<p class="price">From $295 per night</p>
<p class="label">In the room</p>
<div class="amen">
<div><span class="tick">✓</span><span>Freestanding bath and separate shower</span></div>
<div><span class="tick">✓</span><span>Sofa bed made up on arrival for children</span></div>
<div><span class="tick">✓</span><span>Small fridge and a pour-over coffee set</span></div>
</div>
<a class="button" href="/contact/#book">Ask for a Loft Suite</a>
</div>
</article>
</div>
</section>
<section class="oat" id="rates">
<div class="wrap">
<div class="head">
<p class="eyebrow">Rates and policies</p>
<h2>What the price includes</h2>
<p>The “from” price is our lowest midweek rate in winter. Summer weekends cost more; your booking reply always shows the exact total.</p>
</div>
<div class="rules">
<div class="rule"><span class="rule-icon">✓</span><h3>Breakfast for two</h3><p>Every rate includes a cooked or continental breakfast for two guests. Children in the Loft Suites eat for $12 each.</p></div>
<div class="rule"><span class="rule-icon">↺</span><h3>Cancel up to 72 hours ahead</h3><p>Flexible rates can be cancelled free until 3 pm three days before arrival. After that, we charge the first night.</p></div>
<div class="rule"><span class="rule-icon">●</span><h3>Two-night weekends</h3><p>Friday and Saturday stays from May to September need a minimum of two nights. Single nights are fine midweek.</p></div>
</div>
<p class="small">Prices include breakfast and the 6% Wrenmouth occupancy tax. We take a card to hold the booking and charge nothing until you arrive, except for non-refundable rates, which are paid in full when you book.</p>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Not sure which room?</h2>
<p>Tell us who is coming and what matters most — a view, a bath, no stairs — and we will suggest the room that fits.</p>
<a class="button" href="/contact/#book">Send a booking request</a>
</div>
</section>
</body>
</html>
