# Blocks — Centered title & text

A centred H2 over a rich-text paragraph. Full width on mobile and tablet, a
half-width column from laptop up. Rebuilt from production's `CenteredTitleText`
Storyblok component on Gazelle tokens only. The Blocks → Centered title & text
screen emits this exact markup.

## Metadata

- **Category:** Blocks
- **Family:** Titles & text
- **Status:** Stable
- **Storyblok component:** `CenteredTitleText`
- **Production source:** `gazelle-int-website/app/storyblok/CenteredTitleText.vue`
- **Source:** `docs/blocks-registry.js` (canonical markup), `tailwind.css` (theme)

## When to use

- An introduction or a short statement between richer sections: one heading and one
  to three short paragraphs, centred.
- Keep the text short. From laptop up the column is half the content width (at most
  660px), which suits a few lines, not long reading.

## When not to use

- Long-form content, or text that needs buttons or an image — use a title/text block
  with those parts instead.
- Left-aligned copy. This block is always centred.

## Storyblok fields

| Field | Type | Required | Notes |
| --- | --- | --- | --- |
| `title` | text | Yes | Rendered as the section's `<h2>`. |
| `text` | richtext | Yes | Rendered inside the `rich-text` wrapper. |
| `custom_padding` | boolean | No | Off: section padding on both sides. On: `padding_top` / `padding_bottom` choose each side. |
| `padding_top` | boolean | No | Only applies when `custom_padding` is on. |
| `padding_bottom` | boolean | No | Only applies when `custom_padding` is on. |

## Anatomy

```html
<section class="mx-auto w-full max-w-content px-gutter py-section-sm laptop:py-section-lg">
  <div class="mx-auto text-center laptop:w-1/2">
    <h2 class="mb-6 type-h2-sm text-fg-primary tablet:mb-10 tablet:type-h2-lg">Made to move you</h2>
    <div class="rich-text type-body-sm text-fg-primary tablet:type-body-lg">
      <p>…</p>
    </div>
  </div>
</section>
```

**Padding** — replace the section's `py-section-sm laptop:py-section-lg` according to the
Storyblok fields:

| `custom_padding` | `padding_top` | `padding_bottom` | Classes |
| --- | --- | --- | --- |
| off | — | — | `py-section-sm laptop:py-section-lg` |
| on | on | off | `pt-section-sm laptop:pt-section-lg` |
| on | off | on | `pb-section-sm laptop:pb-section-lg` |
| on | on | on | both of the above |
| on | off | off | *(none)* |

## Tokens

- Layout: `max-w-content` (`--container-content`), `px-gutter` (`--spacing-gutter`),
  `*-section-sm` / `*-section-lg` (`--spacing-section-*`), breakpoints `tablet:` and `laptop:`.
- Type: `type-h2-sm` → `type-h2-lg`, `type-body-sm` → `type-body-lg` (`--type-*`), `rich-text`.
- Colour: `text-fg-primary` (`--color-fg-primary`).
- Spacing: `mb-6` (24px) → `tablet:mb-10` (40px) on the 4px grid.

## Production mapping

| Part | Production | Design system | Decision |
| --- | --- | --- | --- |
| Container | `c-container-small` (fluid, max 1360px, centred) | `mx-auto w-full max-w-content` | New layout token, same value |
| Gutter | `px-05` (20px), `desktop-xl:px-00` | `px-gutter` (20px) | Snapped; the ≥1920px exception is dropped |
| Section padding | `py-07` / `laptop:py-11` (32 / 80px), per side via `pt-` / `pb-` | `py-section-sm laptop:py-section-lg` | New layout tokens pointing at `space-8` / `space-20` |
| Column | `text-center laptop:w-2/4 laptop:mx-auto` | `mx-auto text-center laptop:w-1/2` | Same ratio |
| Title (mobile) | `.h2`: 32px, light, line-height 100%, −2.5% | `type-h2-sm`: 32px, light, 125%, −2.5% | Snapped to H2 Small; line-height follows the role |
| Title (tablet+) | `.h1-small`: `clamp(48px, 5vw, 64px)`, line-height 100% | `tablet:type-h2-lg`: 40px, light, 125%, −5% | No fluid type; the H2 role's Large variant, as the element is an `h2` |
| Title margin | `mb-06` / `tablet:mb-08` (24 / 40px) | `mb-6 tablet:mb-10` | Exact |
| Text | `text-md font-light` (18px, 300, 1.5, tracking 0), `text-main-black-500` (#1c1c1c) | `type-body-sm tablet:type-body-lg`, `text-fg-primary` (#1c1c1c) | 16px below tablet by the Small → Large rule; tracking follows the role |
| Rich text | Scoped `RichText` component styles | `rich-text` utility | Shared across blocks |
| Motion | `v-motion-fade-in-from-bottom` on title and text | — | Behaviour, not markup: fade up on first view, off under `prefers-reduced-motion` |

## Usage

- Keep the title to one line on laptop if possible; it wraps and stays centred.
- Don't add colour or size classes to the rich-text content. It inherits the body role
  and `text-fg-primary` from the wrapper.

## Cross-references

- `specs/foundations/layout.md` — container, gutter, section rhythm, the Small → Large rule.
- `specs/foundations/typography.md` — the H2 and Body roles, and `rich-text`.
- `specs/tokens/layout-tokens.md` — the layout tokens used above.