Components Getting Started

Universal conventions so AI-generated pages look consistent and clean

How PageJSON works

Every page is JSON: SEO + a sections array. Each section picks a component, a variant, and a data object.

This page documents a few cross-component conventions that are safe for AI to use across the site.

Basic Section Shape (copy/paste)

All components follow this structure inside sections[]

{
  "component": "content-block",
  "variant": "text-only",
  "data": {
    "heading": "Section heading",
    "lead": "Optional lead",
    "body": "Optional body"
  }
}

- **component**: the renderer name (hero, cta, content-block, feature-grid...)
- **variant**: the layout style for that component
- **data**: component-specific fields
- Prefer short, predictable text when possible; long text will wrap but can affect rhythm.

Universal tokens

bg: most components accept white, light, grey, green, black (and sometimes brand tokens).
padding: most components accept spacing tokens like py-4 or p-4 p-lg-5.
align: where supported, use left or center (keep it consistent on a page).
animate: boolean to enable scroll animations.

Buttons (shared pattern)

Many components accept buttons as an array of { text, url, style }

{
  "buttons": [
    { "text": "Primary CTA", "url": "/quote", "style": "primary" },
    { "text": "Secondary", "url": "/services", "style": "outline-primary" }
  ]
}

- **style** maps to Bootstrap button styles: `primary`, `secondary`, `outline-primary`, `outline-light`, etc.
- Keep button text short (1–3 words) for best responsiveness.

Feature-like objects (icon + title + text)

Several components render feature lists via shared partials. These objects support a standardized, AI-friendly set of overrides:

iconClass: sets icon color (e.g. text-success)
iconBg: enables an icon disc (e.g. success, warning, primary)
titleClass: optional class for the title text
textClass: optional class for the body text
itemClass: optional class on the feature wrapper (spacing/utilities)

These are additive: if you omit them, the default styling remains unchanged.

Feature objects with class overrides (copy/paste)

Works anywhere the shared features list is used (e.g. content-block, CTA, hero variants that opt in)

{
  "contentFeatures": [
    {
      "icon": "fa-shield-halved",
      "title": "Reliable",
      "text": "Designed to wrap cleanly on small screens.",
      "iconBg": "success",
      "titleClass": "fw-semibold",
      "textClass": "text-dark-muted"
    },
    {
      "icon": "fa-clock",
      "title": "Fast",
      "text": "Short text looks best, but long text will wrap.",
      "iconClass": "text-warning",
      "itemClass": "mt-1"
    }
  ]
}

- Prefer **iconBg** when using larger icons (rich features). For small 1x icons, **iconClass** is usually enough.
- Keep feature text to 1–2 lines when possible; wrapping is supported, but long paragraphs can feel heavy.

Trust signals (icon + short text)

Trust signals support the same idea of additive overrides:

iconClass (defaults to text-success)
textClass (optional)
itemClass (optional)

Trust signals example (copy/paste)

{
  "trustSignals": [
    { "text": "ISO-aligned process" },
    { "text": "UK-wide collection & delivery", "icon": "fa-truck", "iconClass": "text-primary" },
    { "text": "Fast turnaround", "icon": "fa-bolt", "iconClass": "text-warning", "textClass": "fw-semibold" }
  ]
}

Next steps

Browse the component library for ready-to-copy examples, or read the page schema reference for full structure.

View Components Page Schema

Documentation