# Loyalty stamp card

> A coffee loyalty card drawn in blocks: ten numbered circles in two rows of five, the first four stamped and the tenth marked on us, and beside it how it works in three numbered ruled lines and a link. The rows hold five across at every width. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/loyalty-stamp-card.html
Section: Call to action
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, paragraph
Keywords: loyalty, coffee card, stamp card, café, rewards, free coffee

## Variations (2)

### Stamp card (the default)

Identical markup in every theme.

A role-plate card on a role-rule hairline, stamped circles in your contrast colour with base numbers, empty ones ringed, the tenth dashed.

### Crumb

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

The Crumb café set: a milk card on an oat hairline, espresso stamps, dashed cocoa rings, a terracotta tenth and Georgia numerals.


---

## The signature moment: a loyalty card drawn in blocks: ten circles in two rows, the first few filled, the tenth marked "on us"; beside it how it works in three lines

**The card is drawn, not described: ten numbered circles in two rows of
five, the first four stamped and the tenth marked On us.** Each circle is a
`core/cover` with a plain colour, aspect ratio 1 and a 50% radius; each row
is a columns block that does not stack on a phone, so the card keeps five
across at every width and the circles shrink with it. Beside it, three
numbered lines between rules say how it works.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** The card tries `role-plate` and `role-plate-text` on a
  `role-rule` hairline. Stamped circles are your `contrast` colour with
  `base` numbers; empty ones are ringed in `contrast`, the tenth dashed.
- **Links.** An underlined text link.

## What it decides for itself

- **The heading.** The `x-large` rung.
- **The numerals.** Off the ladder, sized to the circles and the lines.

## What to change first

1. **The stamps.** Move the stamped colour to show more or fewer.
2. **The reward.** The tenth circle and the heading.
3. **The link.** `#menu`.

## The Crumb look

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.

## Notes

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