Meridian showcase 09 / 09
Demonstration page. The business is invented, the words are sample copy, and this is not work done for a client.
All nineCairnwell Lodge - Rural hotel
Twelve rooms at the end of a road that ends.
A stone lodge on the far side of the glen, with twelve rooms, one dining room and no through traffic.
12 rooms
Which is the entire building, not a wing of it
Dinner is one sitting at one time, cooked from a menu that changes when the delivery does.
Where it is
Three planes, and three labels tethered to them.
The notes are anchored to the figure in CSS rather than positioned by hand, so they stay attached at every width. The type on the planes never moves, because nobody should have to read a moving target.
01
Cairn Dubh, 640 metres
The ridge round is nine miles and starts at the gate. Most guests do it on the second morning.
02
The lodge, twelve rooms
Built in 1878 as a shooting lodge, re-roofed in 2019, and the whole of it is the hotel.
03
The burn, below the terrace
Loud after rain. Rooms four and five hear it with the window open, which people either want or do not.
Rates
- Per room, per night
- Dinner, breakfast and a filled flask included
- Minimum stay
- Two nights, all year, including Hogmanay
- Single occupancy
- No supplement, because the room costs the same
The road
Forty minutes from the main road
Single track for the last eight miles with passing places. It is tarmac the whole way and gritted through the winter.
01
The table
One sitting, at eight
Dinner is included in every rate. There is no menu choice on the night, and dietary requirements are asked for at booking.
02
The hill
Straight out of the door
The ridge path starts at the gate. Boots, poles and a printed map of the round are kept in the boot room for guests.
03
Two nights minimum, dinner included, all year.
Check availabilityCairnwell Lodge
Two nights minimum, dinner included, all year.
Rates are per room and include dinner, breakfast and a flask filled for the hill. There is no single supplement.
That is where the demonstration ends. Cairnwell Lodge is invented, so the buttons above lead here rather than anywhere. These two do work.
What you are looking at
- Technique
- CSS anchor positioning
- Why here
- The page is a three-plane diorama, and the honest way to label a plane is to tether the label to it rather than to a hand-tuned pair of coordinates that breaks at the next breakpoint. Anchor positioning does that in CSS with no measuring in JavaScript, and the type itself never parallaxes because nobody should have to read a moving target.
- With animation off
- Where anchor positioning is not supported the three notes are an ordinary numbered list under the figure, which is what they are in the markup to begin with.
- anchor-name and position-anchor
- position-area
- @supports gated layout
- three-plane drift under 40px
Cairnwell Lodge - Which is the entire building, not a wing of it
Check availability