Stays room blocks

Where to stay, for guests travelling to one event: the hotels with rooms held for them, and on each card the two facts that decide whether they get one, the name to quote and the date the rooms go back on sale. It sits in the listings section beside listing-cards (the number is bigger than the name), services-photo-cards (price is the second headline) and about-suppliers-miles (miles as the figure).

Every card ends on an inverted stub: "Quote", the booking name set large, and "Held until" a date. The lead card carries a photograph and spans two rows of the grid, with the two smaller cards stacked beside it; each card is a vertical flex that pushes its stub to the foot, so the stubs level with the card edges. A note for budget rooms follows the grid.

1. The code and the date on each stub. Hotels hold rooms against a name or a code until a release date; copy both exactly as the hotel wrote them.
2. Each stay: the name, the distance, one line, the price and the Book direct link (each points at a placeholder anchor).
3. The photograph. Select it and choose Replace.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text. The cards try role-plate, role-plate-text and a role-rule border; the stubs invert to contrast with base text; all fall back to base and contrast.
• Buttons. Underlined Book direct links in the text colour.

• The grid. 20rem minimum columns: three across from about 1100px, the lead card taking two columns and two rows; two across on a tablet with the small cards side by side under the lead; one column on a phone, lead first.
• The heading. On the ladder at x-large: this section is for reading, and the page's display moment belongs to the section above it.

Part of the Vow Pattern Set, a couple's whole wedding website in one design language: wisteria white ground #f7f5fb, a wisteria band #ebe6f3, card white #ffffff and a midnight slab #1f2240; midnight ink, dusk #555a78 for secondary copy, peony #a8365a labels on light grounds and pale peony #f2b8c9 on the slab, wisteria hairlines #d9d3e6. Headings and names are Didot at 400 (Bodoni MT, Hoefler Text, Baskerville, Times New Roman, serif), body, labels and buttons Gill Sans (Seravek, Trebuchet MS, sans-serif). Cards and buttons are square; the primary button is a filled midnight rectangle, the secondary an underlined peony link. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: group, heading, paragraph, image, buttons, button. No plugin, nothing to keep updated.

The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the image and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.