# Date in figures

> One date made the headline: a dark slab with a small label and heading over the day, month and year as three equal figures at monumental size, each with a small word beneath and a hairline between them, then one line of place and an Add to your calendar button. The three figures stay side by side on a phone. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/date-in-figures.html
Section: Stats
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, group, heading, paragraph
Keywords: wedding, save the date, date, countdown, calendar, event, day

## Variations (2)

### Dark slab (the default)

Identical markup in every theme.

Your contrast colour as the ground with base figures and words, currentColor rules between the figures and an inverted base button.

### Vow

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

The Vow wedding set: a midnight slab with wisteria-white Didot figures, lavender-grey words beneath, dusk rules between the cells, a pale peony label and a square pale peony calendar button.


---

## The signature moment: the date is the headline, split into three ruled figures

**Three flex cells that never wrap**, each `selfStretch: fill`, so the
figures share the width equally at every size, 19, 06 and 27, with a
hairline down the left edge of the second and third cells. The cells carry
no padding of their own (the padding is on the group inside), so the rules
run the full height of the row. On a phone the figures stay three across at
about 72px, with their words at 14px.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** An inverted slab: your `contrast` colour as the ground, your
  `base` colour for every word and figure, `currentColor` rules. Labels on
  the slab start at `base`, never a ground role. The button inverts back to a
  `base` fill with `contrast` type, so it still reads as the lit thing.

## What it decides for itself

- **The figures.** `clamp(4.5rem, 1rem + 14vw, 12rem)`: about 72px on a
  phone, 192px on a laptop. Off the ladder, because their size is the
  composition.
- **The heading.** The `x-large` rung, italic.

## What to change first

1. **The figures and their words.**
2. **The calendar link.** It is a Google Calendar template URL with the
   date, time and place in it; edit its `text`, `dates` and `location`, or
   upload an `.ics` file to your Media Library and link to that instead.
3. **The place line.**

## The Vow look

Part of the Vow Pattern Set, a couple's whole wedding website in one design
language: wisteria white `#f7f5fb` ground, midnight `#1f2240` ink, dusk
`#555a78` muted ink, card white `#ffffff` on a wisteria hairline `#d9d3e6`,
peony `#a8365a` labels on light grounds and pale peony `#f2b8c9` on the
midnight slab. Names and headings are Didot at 400 with an italic ampersand;
body, labels and buttons are Gill Sans. Buttons are square midnight
rectangles or underlined peony links; cards and photographs are square. 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, heading, paragraph, buttons, button. No countdown, no script.