# Hero next slots

> A clinic or practice hero: a display headline, a short lead and two text links beside a square photograph, with a card of the next free appointments lapping the photograph's foot. Each appointment is a ruled row of time, day and who you will see, and the earliest carries the only filled button. Example image included and replaceable in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-next-slots.html
Section: Hero
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: hero, booking, appointments, clinic, physio, diary, local business

## Variations (2)

### Diary card (the default)

Identical markup in every theme.

Your base ground and contrast text, the diary card a role-plate panel on a hairline, the first slot your theme's button and the rest underlined links.

### Mend

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

The Mend physio set: a mint band, a large deep teal headline, a white diary card lapping a rounded portrait, the earliest slot marked by an apricot rule and holding the only teal button, sage labels, all in Avenir Next.


---

## The signature moment: the diary laps the portrait and holds the only filled button

**The action lives in the diary, not under the headline.** Three appointments
stand as ruled rows, each a time at display size beside the day and the
clinician, and only the earliest carries a filled button; the later two are
underlined links. The headline column has no filled button at all, so the eye
goes from the promise to the soonest time you can be seen. The card laps the
photograph's foot by `clamp(3rem, 7vw, 6rem)` and sits in from its left edge,
so it reads as a card placed on the picture rather than a caption under it.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground and `contrast` text. The card tries
  `role-plate` and `role-plate-text`, falling back to `base` and `contrast`,
  on a `role-rule` hairline; the label tries `role-label`.
- **Buttons.** The first slot is your theme's button with a stated padding
  for a 44px target; the rest, and the phone number under the card, are
  underlined text links padded to 44px.

## What it decides for itself

- **The headline.** Off the ladder on purpose, a bare clamp that is 34px on a
  phone and reaches 66px by 1280. The card title is on the `large` rung.
- **The times.** `clamp(1.375rem, 2.2vw, 1.875rem)`, so a time reads before
  its day.

## What to change first

1. **The slots.** Type your own times, days and names; duplicate a row for more.
2. **The photograph.** Select it and choose **Replace**.
3. **The links.** `#book`, `#treatments`, `#team` and the phone number.

## The Mend look

Part of the Mend Pattern Set, one physiotherapy clinic's whole site in one
design language: clinical white ground `#f7faf9`, deep teal-navy ink
`#12303a`, muted ink `#4a6068`, sage `#3d6e5c` labels, mint `#e6f0ec` cards
on `#d3dfdb` hairlines, and apricot `#f2a65a` as the one warm mark in the section, a fill or a rule and never text on the white ground. Avenir Next throughout, headings 600 and display 500;
buttons teal with 6px corners or underlined links, cards and photographs at
10px. 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.
- The root group sets headings and links to `currentColor`, so every heading,
  paragraph and link inherits the group's text colour in any theme; only
  role-bearing text (labels, rules, plates) carries its own chain.

## Included images

The copied markup includes an 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.