# About day in hours

> An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/about-day-in-hours.html
Section: Team
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, group, heading, image, paragraph
Keywords: about, story, day, hours, bakery, café, small business

## Variations (2)

### Clock times (the default)

Identical markup in every theme.

Your base ground and contrast text, the times at display size in your text colour, hairline rules in role-rule falling back to contrast, your theme’s button.

### Crumb

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

The Crumb café set: oat ground, espresso ink, the clock times in terracotta Georgia on oat hairlines, two rounded photographs and a pill button, Georgia over Helvetica.


---

## The signature moment: the clock times are the structure

**Five clock times, set at display size down a ruled column, are the whole
story's skeleton: 4am, 7am, 8am, 12pm, 4pm.** Each hour is a row between
hairlines with the time in a fixed third and a short title and line beside
it, so the eye reads the day top to bottom before it reads a word. The rows
never stack: the time keeps its third on a phone, only smaller.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground and `contrast` text; headings, times and
  copy inherit it. The eyebrow tries `role-label` and the hairlines
  `role-rule`, both falling back to `contrast`.
- **Buttons.** Your theme's button with a stated padding for a 44px target.

## What it decides for itself

- **The times.** Off the ladder on purpose: `clamp(2.25rem, 5vw, 4.5rem)`,
  the size is the composition. The row titles are on the `large` rung and the
  h2 on `x-large`.

## What to change first

1. **The hours.** Type your own times and what happens at each; add a row
   by duplicating one.
2. **The photographs.** Select each and choose **Replace**.
3. **The link.** `#order`.

## 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, heading, paragraph, image, 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.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.