# Feature circle badges

> Four large circles in a poster row, alternately filled and outlined, each holding one figure a customer cares about, with a short caption under it and a call or booking action beneath the row. Four across on a desktop and two by two on a tablet and a phone, so the circles never shrink to buttons. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/feature-circle-badges.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, cover, group, heading, paragraph
Keywords: features, circles, figures, badges, trades, local business

## Variations (2)

### Four circles (the default)

Identical markup in every theme.

Two circles filled in your contrast colour and two outlined in it on your base ground, captions in your text colour, your theme's button beside an underlined phone link.

### Sky and tomato

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

Sky blue ground, navy ink, tomato and navy circles, a pill-shaped navy button, in Arial Black over Arial.


---

## The signature moment: four circles, filled and hollow, read like a poster

**Four large circles alternate between a solid disc and a hairline ring, each
holding a single figure a customer cares about.** The circles are plain-colour
covers with an aspect ratio of one and a 50% radius, so they stay perfectly
round at every width and hold their figure dead centre. The alternation of
filled and outlined gives the row its rhythm without any colour of its own.

## How it collapses

Two pairs, each a two-column grid, inside an outer grid with a 30rem minimum
column: four across on a desktop, two by two on a tablet, and still two by two
on a phone, so a circle is never shrunk to a button or stacked into a column
of four. Each circle is capped at 17rem.

## 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
  filled circles are your `contrast` behind `base` figures; the hollow ones
  are your `base` inside a 2px `contrast` ring. The eyebrow tries `role-label`
  and the phone link `role-link`, both falling back to `contrast`.
- **Buttons.** The booking button is your theme's button with a stated
  padding for a 44px target; the phone number is a transparent, underlined
  core button.

## What it decides for itself

- **The circles and their rhythm.**
- **Proportion.** Heading on `xx-large` (hierarchy); the figures are off the
  ladder because their size is the composition.

## What to change first

1. **The four figures and captions.** Keep a figure to four characters so it
   sits inside the circle on a phone.
2. **The actions.** The button points at `#book` and the link at a `tel:`
   number; put your own number in both the text and the link.

## The Sky and tomato look

A Styled variation with its own colours and type: sky blue ground `#dcebf5`,
navy ink `#13233a`, one tomato disc `#c23a22` and one navy disc with white
figures, two navy rings, and a pill-shaped navy button with white type. The
heading and figures are Arial Black, the rest Arial 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:
- paragraph at clamp(2.25rem, 6vw, 5.5rem) (the figures)

## Notes

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