Services photo cards

Six service cards for a trade, clinic or local shop: a 4:3 photograph, the service name, one line of what is included, a starting price and a booking link. It is the priced answer in the features section: feature-grid numbers its points, feature-alternating explains them beside pictures, and this one tells a visitor what each job costs before they pick up the phone.

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.

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.

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

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

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

• paragraph at clamp(2rem, 3vw, 2.75rem) (the price)

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.

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

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.