# About suppliers miles

> Where the food comes from: a heading and a line of story beside a ruled list of suppliers, each with what they bring and how many miles away they are as a large figure on the right. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/about-suppliers-miles.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, paragraph
Keywords: suppliers, local, farms, about, café, provenance

## Variations (2)

### Miles away (the default)

Identical markup in every theme.

A contrast rule over role-rule hairlines, the miles at display size in your text colour, role-label units, an underlined link.

### Crumb

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

The Crumb café set: oat hairlines under an espresso rule, terracotta Georgia miles, cocoa units and an underlined link.


---

## The signature moment: where the food comes from: a ruled list of suppliers, each with what they bring and "miles away" as a large figure on the right

**Distance is the headline of each row.** Every supplier gets a name and
what they bring on the left and how many miles away they are as a large
figure on the right, with the unit under it. The rows are flex rows that
never wrap, so the figure stays on the right at every width, sorted nearest
first under one heavy rule.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground and `contrast` text and top rule; rows
  are ruled in `role-rule` and the units try `role-label`.
- **Links.** An underlined text link.

## What it decides for itself

- **The figures.** Off the ladder on purpose: `clamp(2.5rem, 4.4vw, 3.75rem)`.
- **The supplier names.** The `large` rung.

## What to change first

1. **The suppliers.** Name, what they bring and the miles; duplicate a row to add one.
2. **The heading.** Your own claim about where things come from.
3. **The link.** `#about`.

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