# Stays room blocks

> Where to stay for guests travelling to an event: a lead card with a photograph spanning two rows beside two smaller cards, each with the place, the distance, a line about it, the price and a Book direct link, and each ending on an inverted stub carrying the code to quote and the date the held rooms go back on sale. A note for budget rooms follows. Example image included and replaceable in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/stays-room-blocks.html
Section: Listings
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, group, heading, image, paragraph
Keywords: accommodation, hotels, where to stay, room block, wedding, event, booking code

## Variations (2)

### Room blocks (the default)

Identical markup in every theme.

Your base ground and contrast text, cards in role-plate with a role-rule border, stubs inverted to contrast, underlined Book direct links.

### Vow

This variation states its own colours and states its own type: identical in every theme.

The Vow wedding set: a wisteria band, square card-white cards on wisteria hairlines, the code Ashby-Okafor in Didot on midnight stubs with pale peony labels, peony Book direct links in Gill Sans.


---

## The signature moment: each stay ends on the code to quote and the date its rooms go back

**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.

## What it inherits from your theme

- **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.

## What it decides for itself

- **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.

## What to change first

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**.

## The Vow look

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.

## Notes

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

## Included images

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](/image-credits/) for the source and license. Pasting an image URL
does not import a Media Library attachment.