# Hero arch

> A shop or studio hero with the photograph cut into an arch, rounded across the top and square at the foot, beside a display headline, a short lead and two actions. A small round badge carrying the year the business opened overlaps the foot of the arch. Example image included and replaceable in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-arch.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, column, columns, cover, group, heading, image, paragraph
Keywords: hero, arch, badge, shop, local business, florist

## Variations (2)

### Arch and badge (the default)

Identical markup in every theme.

Your base ground and contrast text, the badge a disc in your contrast colour with base type, your theme's button beside an underlined link.

### Peony and fern

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

Pale peony ground, deep fern ink, a fern badge and a pill-shaped fern button, in Palatino over Avenir Next.


---

## The signature moment: the badge sits on the doorstep of the arch

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

## What it inherits from your theme

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

## What it decides for itself

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

## What to change first

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

## The Peony and fern look

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.

## Display type

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)

## Notes

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

## Included images

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