# Services photo cards

> Six service cards for a trade or local business, each a 4:3 photograph, the service name, one line of what is included and a starting price set larger than the name, on a ruled foot beside its booking link. The prices line up across the grid so a visitor compares them at a glance. Example images are included and can be replaced in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/services-photo-cards.html
Section: Features
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, group, heading, image, paragraph
Keywords: services, prices, cards, trades, photos, local business

## Variations (2)

### Priced cards (the default)

Identical markup in every theme.

Six cards on your base ground, each closed by a hairline in currentColor with the starting price at display size and an underlined booking link.

### White and safety orange

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

White ground, charcoal ink, warm grey plates under a safety orange top bar, orange prices and square charcoal buttons, in Arial Black over Arial.


---

## The signature moment: the price is the second headline

**Each card closes on a ruled foot where the starting price is set larger than
the service name.** A small "From" label sits over the figure, and the booking
link sits level with it on the same hairline. The cards are flex columns that
push the foot to the bottom, so in every row of the grid the six hairlines and
the six prices share one baseline whatever the length of the copy above, and a
visitor reads across the prices the way they would read a price list on a van
door.

## What it inherits from your theme

- **Typeface.** The base states no font family; headings, prices and copy take
  your theme's.
- **Palette.** The ground is your `base` and the text your `contrast`, each a
  chain ending on a colour WordPress guarantees. The eyebrow and the "From"
  labels try `role-label` first and the booking link `role-link`, both falling
  back to `contrast`.
- **Rules.** The foot hairline is `currentColor`, so it follows your text.
- **Buttons.** The booking links are transparent core buttons with an underline,
  so they keep a 44px tap target on a phone without painting a ground.

## What it decides for itself

- **The grid.** A grid layout with a 20rem minimum column: three across at
  desktop, two at tablet, one on a phone. It does not stack early the way
  `core/columns` does below 782px.
- **Proportion.** Section heading on the theme's `xx-large` rung (its job is
  hierarchy), card titles on `large`, copy on `medium`; the price is off the
  ladder because its size is the composition.

## What to change first

1. **The six services and prices.** Keep each line to one sentence so the cards
   stay close in height; the foot aligns either way.
2. **The photographs.** Select each image and choose **Replace**.
3. **The links.** Each button points at `#book`; point them at your booking or
   contact page.

## The White and safety orange look

A Styled variation with its own colours and type: white ground, charcoal ink
`#1b2430`, warm grey plates `#f1eee8` under a 6px safety orange `#c2410c` top
bar, orange prices and eyebrow, and square charcoal buttons with white labels.
Headings and prices are Arial Black, copy Arial. Every text pair is measured on
its painted ground: charcoal on white and on the plate well above 4.5:1, the
orange eyebrow on white above 4.5:1, the orange prices on the plate above the
3:1 large-text floor (the small "From" label over them is charcoal), and white
on charcoal above 4.5:1. 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:
- paragraph at clamp(2rem, 3vw, 2.75rem) (the price)

## Notes

- Core blocks only: group, columns, column, heading, paragraph, image, 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.