Hero arch

A hero for a shop, studio or practice with a real front door: the photograph is cut into an arch beside the headline, and a small round badge carrying the year the business opened overlaps the foot of the arch. It sits in the hero section beside hero-column-portrait, whose picture is a plain column, and hero-plate-on-paper, which frames the whole hero as a card.

The photograph is rounded fully across the top and square at the foot, an arch rather than a rounded rectangle, and a disc half on and half off its foot stamps the year. The arch is a per-corner radius on the image, so any photograph a buyer drops in is cut the same way. The badge is a plain-colour cover with an aspect ratio of one and a 50% radius, lapped up over the arch by a negative top margin on the second child of a vertical flex group, so the lap never collapses into the column above it.

1. The photograph. Select it and choose Replace; the arch stays.
2. The badge. Click into it and type your own year or a rating.
3. The links. #visit and #plants.

• Typeface. The base states no font family.
• Palette. The ground is your base and the text your contrast. The badge is your contrast behind base type, with a base ring that parts it from the photograph. The eyebrow tries role-label and the link role-link, both falling back to contrast; the rule over the opening hours is currentColor.
• Buttons. The first action is your theme's button with a stated padding for a 44px target; the second is a transparent, underlined core button.

• The arch. 999px top corners, which WordPress and every browser scale down to exactly half the photograph's width, so the top is a true semicircle at every width. Square bottom corners.
• The headline size. Off the ladder on purpose: the headline and the arch are the composition. The lead is capped at 34rem so it keeps a readable measure.

Off the theme's ladder on purpose, because the size is the composition:

• heading at clamp(2.625rem, 5.2vw, 4.75rem) (the headline)
• paragraph at 2rem (the year in the badge)

A Styled variation with its own colours and type: pale peony ground #f7e6df, deep fern ink #1d3326, a fern badge #2e6a45 with peony type and a peony ring, and a pill-shaped deep fern button that echoes the arch. The headline and the year are Palatino, everything else Avenir Next at 400. Every text pair is measured on its painted ground. Take the base if you want your theme's colours.

• Core blocks only: group, columns, column, heading, paragraph, image, cover, buttons, button. No plugin, nothing to keep updated.
• Text is measured at 4.5:1 against the ground it actually sits on.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover 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.