# Events date tiles

> Upcoming events as tear-off calendar leaves: each tile has a month strip with the weekday, the day of the month as a big numeral, the event’s title, its time and price, and a ruled book link at the foot, all tiles level at every width. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/events-date-tiles.html
Section: Listings
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: events, calendar, dates, supper club, workshops, tickets

## Variations (2)

### Calendar leaves (the default)

Identical markup in every theme.

Tiles in role-plate with a contrast hairline, each month strip in your contrast colour with base type, the numerals in your text colour, underlined book links.

### Crumb

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

The Crumb café set: milk tiles on an oat hairline, terracotta month strips, espresso Georgia numerals and underlined book links, Georgia over Helvetica.


---

## The signature moment: every event is a calendar leaf

**Each tile is a calendar leaf: an inverted month strip with the weekday
at its far end, then the day of the month as the largest thing on the
tile.** The tiles are a grid of 15rem minimum columns, four across on a
laptop, two on a tablet and one on a phone; each is a vertical flex card
whose middle grows, so the book links sit level on one line however long a
title runs.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Tiles try `role-plate` and `role-plate-text` with a
  `role-rule` hairline; the month strip is your `contrast` with `base`
  labels; the numerals, titles and links inherit the tile's text colour.
- **Links.** Transparent, underlined core buttons.

## What it decides for itself

- **The numeral.** Off the ladder on purpose: `clamp(4rem, 7vw, 6rem)`.
- **The titles.** The `large` rung.

## What to change first

1. **The dates.** Type the day, weekday and month on each tile.
2. **The events.** Title, time and price; duplicate a tile to add one.
3. **The links.** `#book`.

## 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, 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.