# Values three principles

> An about-page values band. A tracked label, a heading and a short intro sit over three ruled rows; each row runs a numbered principle at the left, a short explanation in the middle and, at the right, the figure that proves it set at display size with a line of caption. Every promise is signed off by a number rather than an adjective. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/values-three-principles.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: column, columns, group, heading, paragraph
Keywords: values, principles, promises, about, charity, mission, proof

## Variations (2)

### Three principles (the default)

Identical markup in every theme.

Your base ground with your contrast type, the rows ruled in your rule colour and the proof figures in your text colour.

### Porcelain and kingfisher

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

A charity or clinic look: porcelain ground, deep teal-navy type and rules, and the proof figures in kingfisher blue, in Avenir Next throughout.


---

## The signature moment: every principle is signed off by its proof

**The right-hand column of each row is a number at display size, not a
sentence.** The principle is the claim; the figure at
`clamp(2.5rem, 4.4vw, 4rem)` with one line of caption is the evidence, so the
eye runs down the right edge and reads three proofs before it reads a word of
explanation. It survives colourlessness because it is scale and position: the
same column, the same size, three times, between full-width rules.

## What it inherits from your theme

- The ground is `base` and every line of type is `contrast`, each a two-rung
  chain. Text is at 4.5:1 or better in the stock themes; the figures are large
  display at 3:1 or better.
- The numerals and the label start on `role-label`, the rules on `role-rule`;
  both fall through to `contrast`.
- The section heading is off the ladder on purpose, a bare
  `clamp(2.25rem, 4.2vw, 4rem)`, so it holds its own against the figures; the
  principle titles are a bare `clamp(1.5rem, 2.2vw, 2rem)`, the second mass on
  the section. Body copy takes `medium`.
- The typeface is your theme's.

## What it decides for itself

- The intro sits in a 40rem group so it stays under 75 characters a line.
- Each row is three columns at 36, 38 and 26 per cent, stacking below 782px
  with the principle first and its proof last.

## The Styled look

`porcelain-and-kingfisher` states a porcelain ground `#f2f6f6`, deep
teal-navy type and rules `#12303b` (12.8:1) and the proof figures in
kingfisher `#0b6784` (5.9:1), in Avenir Next throughout, falling back to
Segoe UI and Arial. The small labels stay in the ink. It is for a charity, a
hospice or a clinic.

## What to change first

The heading and intro, then each principle, its explanation and its figure.
Keep a figure you can stand behind: it is the point of the row.