# Conditions head to foot

> What a clinic treats, as an index of the body read top to bottom: six ruled rows from head and neck to ankle and foot, each with the area as a heading, how many sessions it usually takes and the conditions seen there, and beside every row a small head-to-foot gauge marking where on the body it sits. A closing line and one button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/conditions-head-to-foot.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, column, columns, group, heading, paragraph
Keywords: conditions, treatments, services, clinic, physio, body, index

## Variations (2)

### Body index (the default)

Identical markup in every theme.

Your base ground and contrast text, hairlines in role-rule falling back to contrast, each gauge six ticks in role-rule with a 6px mark in your text colour, your theme's button.

### Mend

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

The Mend physio set: clinical white ground, deep teal ink, mint-grey hairlines, each row's place on the body an apricot mark on a gauge of lifted-sage ticks, a teal 6px-corner button beside an underlined phone link, all in Avenir Next.


---

## The signature moment: the index runs head to foot, and every row shows where

**The rows are in the body's order, and a small gauge beside each marks the
row's height on the body.** The gauge is six short rules stacked in a
1.75rem strip; one of them is a heavier mark, first at the top for the neck,
last at the foot for the ankle, so reading down the index the mark walks down
the body. It needs no drawing and no colour: it is rules and position, so it
survives any theme. On a phone the gauge keeps its strip and the area, the
course and the conditions stack beside it.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground and `contrast` text; the label tries
  `role-label` and the hairlines `role-rule`, both falling back to
  `contrast`. The gauge is 2px ticks in `role-rule` and a 6px mark in your text colour.
- **Buttons.** Your theme's button with a stated padding for a 44px target,
  and the phone number an underlined text-link button beside it.

## What it decides for itself

- **The heading.** Off the ladder on purpose, a bare clamp that is 34px on a
  phone and 64px by 1280.
- **The area names.** `clamp(1.5rem, 2.4vw, 2.25rem)`, the index's second
  voice; the conditions take `medium`.

## What to change first

1. **The areas.** Type your own conditions and courses; keep the order head
   to foot, and if you add or remove a row, add or remove a mark in every
   gauge and move the heavy one.
2. **The phone number and the link.** `tel:` and `#book`.

## The Mend look

Part of the Mend Pattern Set, one physiotherapy clinic's whole site in one
design language: clinical white ground `#f7faf9`, deep teal-navy ink
`#12303a`, muted ink `#4a6068`, sage `#3d6e5c` labels and gauge marks on lifted sage `#9cc7b5` ticks, mint
`#e6f0ec` cards on `#d3dfdb` hairlines, and apricot `#f2a65a` as the one warm mark in the section, a fill or a rule and never text on the white ground. Avenir Next throughout, headings 600
and display 500; buttons teal with 6px corners or underlined links. 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) carries its own chain.