Hero next slots

A home hero for a clinic, practice or studio that sells by appointment. One side is the promise: a label, a display headline, a short lead and two underlined links. The other is a square photograph of the person you will see, and over its foot a card of the next free appointments. The two sides share a row from about 900px and stack below it, the diary under the promise. It sits in the hero section beside hero-arch and hero-open-now-stamp; cta-book-appointment makes one slot its headline at the foot of a page, where this one opens the page on the diary itself.

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.

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.

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

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

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.

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

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