Hero open now stamp

A café or bakery home hero: a large photograph of the room with a round stamp giving today's hours lapping its corner, and beside it the headline, a line of welcome, two actions and the address on a rule. It sits in the hero section for a business whose first question is "are you open?"

The hours are a stamp, not a line of small print. A circle (a core/cover with a plain colour, aspect ratio 1 and a 50% radius) ringed in the page ground laps the photograph's bottom right corner, half on the photo and half below it. The photo and the stamp's row are the two items of a vertical flex group, and the stamp row is the second item with a negative top margin, so the stamp paints over the photo. The stamp is 11rem on a laptop and 8rem on a phone, and the lap scales with it.

1. The photograph. Your room, your counter or your window.
2. The stamp. Your days and hours.
3. The links. #menu and #find-us.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text; the label tries role-label and the address rule role-rule. The stamp is a contrast circle with base type, ringed in base.
• Buttons. Your theme's button with a stated padding, and an underlined text link.

• The headline. The xx-large rung: its job is hierarchy.
• The stamp's hours. Off the ladder: clamp(1.875rem, 3.2vw, 2.75rem), sized to the circle.

Part of the Crumb Pattern Set, one café's whole site in one design language: oat ground #f4ecdf, espresso ink #2b1d16, muted cocoa #5c4a3f, milk cards #fbf7f0 on oat hairlines #dccfbf, terracotta #b3462d labels and peach #e8a27c on the espresso slab. Headings are Georgia at 400, body, labels and buttons Helvetica; buttons are espresso pills or underlined links, cards and photographs rounded at 14px. 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, columns, column, image, cover, heading, paragraph, 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 WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.