@contentrain/astro-kit 0.5.0 → 0.6.0

package/components/pricing/meta.json

@@ -0,0 +1,133 @@
+{
+  "id": "pricing",
+  "name": "Pricing",
+  "description": "Price plans side by side: name, price, period, a short description, a feature list and a button each. The featured plan is raised and badged.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Button.astro",
+    "Section.astro",
+    "types.ts"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Plans per row on wide screens; one on phones, two on tablets."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading above the plans."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Intro",
+      "description": "A line or two under the heading."
+    },
+    "plans": {
+      "type": "array",
+      "label": "Plans",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "name": {
+            "type": "string",
+            "label": "Name",
+            "required": true,
+            "description": "The plan's name."
+          },
+          "price": {
+            "type": "string",
+            "label": "Price",
+            "required": true,
+            "description": "The price as shown, with its currency (\"$12\", \"Free\", \"On request\")."
+          },
+          "period": {
+            "type": "string",
+            "label": "Period",
+            "description": "What the price is per (\"/month\")."
+          },
+          "description": {
+            "type": "string",
+            "label": "Description",
+            "description": "One line on who the plan is for."
+          },
+          "features": {
+            "type": "markdown",
+            "label": "Features",
+            "description": "What the plan includes, as a markdown list."
+          },
+          "ctaLabel": {
+            "type": "string",
+            "label": "Button label",
+            "description": "The plan's button text."
+          },
+          "ctaHref": {
+            "type": "url",
+            "label": "Button link",
+            "description": "Where the button goes."
+          },
+          "featured": {
+            "type": "boolean",
+            "label": "Featured",
+            "description": "Raises the plan and gives it the badge."
+          }
+        }
+      },
+      "description": "The plans, in display order (Divi pricing tables, Elementor price table)."
+    },
+    "featuredLabel": {
+      "type": "string",
+      "default": "Most popular",
+      "content": false,
+      "description": "Badge text on featured plans."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/columns"
+    ],
+    "elementor": [
+      "elementor/price-table"
+    ],
+    "divi": [
+      "divi/et_pb_pricing_tables"
+    ]
+  },
+  "a11y": "Plans are a <ul>; each name is an <h3>. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+  "pattern": {
+    "summary": "repeated plan units: name + price + feature list + button",
+    "signals": [
+      "2-4 columns",
+      "price text",
+      "list",
+      "1 button per column"
+    ]
+  }
+}

package/components/prose/Prose.astro

@@ -7,6 +7,7 @@
 // as HTML. Only post and page bodies carry `data-pagefind-body`, so search
 // indexes content, not chrome.
 import { tv } from 'tailwind-variants'
+import { renderMarkdown } from '../../../lib/markdown'
 
 const prose = tv({
   base: 'prose prose-site max-w-none',
@@ -18,13 +19,16 @@ const prose = tv({
 
 interface Props {
   /** Rendered HTML of a richtext field. */
-  html: string
+  html?: string | undefined
+  /** A markdown field (a page section's text), rendered at build time. Used when `html` is absent. */
+  markdown?: string | undefined
   /** Index this body for site search. */
   searchable?: boolean | undefined
   class?: string | undefined
   size?: 'base' | 'lg' | undefined
 }
 
-const { html, searchable = true, class: className, size } = Astro.props
+const { html, markdown, searchable = true, class: className, size } = Astro.props
+const body = html ?? await renderMarkdown(markdown)
 ---
-<div class={prose({ size, class: className })} data-pagefind-body={searchable ? '' : undefined} set:html={html} />
+{body && <div class={prose({ size, class: className })} data-pagefind-body={searchable ? '' : undefined} set:html={body} />}

package/components/prose/fixtures.json

@@ -1,4 +1,5 @@
 [
   { "name": "lg", "frame": "narrow", "props": { "html": "<h2 class=\"wp-block-heading\">Keeping what works</h2><p>A careful migration keeps <strong>addresses</strong>, <a href=\"/about/\">formatting</a> and rankings.</p><ul class=\"wp-block-list\"><li>Permalinks stay put.</li><li>Archives survive.</li></ul><blockquote class=\"wp-block-quote\"><p>The fastest request is the one the server never has to think about.</p><cite>Every performance engineer</cite></blockquote><div class=\"wp-block-buttons is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"/contact/\">Get in touch</a></div></div>" } },
-  { "name": "base", "frame": "narrow", "props": { "size": "base", "searchable": false, "html": "<p class=\"has-drop-cap\">Moving a WordPress site to a static stack is mostly about keeping what already works.</p><figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Metric</th><th>Before</th><th>After</th></tr></thead><tbody><tr><td>Requests</td><td>84</td><td>9</td></tr><tr><td>LCP</td><td>3.1 s</td><td>0.8 s</td></tr></tbody></table></figure>" } }
+  { "name": "base", "frame": "narrow", "props": { "size": "base", "searchable": false, "html": "<p class=\"has-drop-cap\">Moving a WordPress site to a static stack is mostly about keeping what already works.</p><figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Metric</th><th>Before</th><th>After</th></tr></thead><tbody><tr><td>Requests</td><td>84</td><td>9</td></tr><tr><td>LCP</td><td>3.1 s</td><td>0.8 s</td></tr></tbody></table></figure>" } },
+  { "name": "markdown", "frame": "narrow", "props": { "markdown": "## From a page section\n\nA section's text is **markdown** in the page model, with [a link](/about/) and a list:\n\n- Written once\n- Rendered at build time", "size": "base" } }
 ]

package/components/prose/meta.json

@@ -18,8 +18,11 @@
   "props": {
     "html": {
       "type": "richtext",
-      "required": true,
-      "description": "Rendered HTML of a richtext field (posts.body, pages.body)."
+      "description": "Rendered HTML of a richtext field (posts.body, pages.body). One of html or markdown is given."
+    },
+    "markdown": {
+      "type": "markdown",
+      "description": "A markdown field (a page section's text, prose.markdown in a page model), rendered at build time with links through the public-link filter. Used when html is absent."
     },
     "searchable": {
       "type": "boolean",

package/components/slider/Slider.astro

@@ -6,7 +6,8 @@
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
-import type { ActionInput, ImageInput } from '../_shared/types'
+import { imageOf, type ImageSource } from '../_shared/image'
+import { type ActionInput, type ImageInput } from '../_shared/types'
 
 const slider = tv({
   slots: {
@@ -36,9 +37,15 @@ const slider = tv({
 })
 
 interface Slide {
-  image: ImageInput
+  /** The image's address (or, until 0.7, an `ImageInput`). */
+  image: ImageSource
+  imageAlt?: string | undefined
   title?: string | undefined
   text?: string | undefined
+  /** The slide's link, flat so a page stays within Contentrain's nesting depth. */
+  ctaLabel?: string | undefined
+  ctaHref?: string | undefined
+  /** Until 0.7: the same link as one object. */
   action?: ActionInput | undefined
 }
 
@@ -58,7 +65,12 @@ interface Props {
   caption?: 'below' | 'overlay' | undefined
 }
 
-const { slides, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', loop = false, perView = '1', aspect, caption } = Astro.props
+const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', loop = false, perView = '1', aspect, caption } = Astro.props
+const slides = given.flatMap((slide) => {
+  const image = imageOf(slide.image, slide.imageAlt)
+  const action = slide.action ?? (slide.ctaLabel && slide.ctaHref ? { label: slide.ctaLabel, href: slide.ctaHref } : undefined)
+  return image ? [{ ...slide, image, action }] : []
+}) satisfies Array<{ image: ImageInput, action?: ActionInput | undefined }>
 const slots = slider({ perView, aspect, caption })
 const sizes = perView === '1' ? '(min-width: 1216px) 1152px, 100vw' : perView === '2' ? '(min-width: 640px) 50vw, 85vw' : '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 85vw'
 // Arrows from sm up; on phones the carousel is swiped and the dots show the position.

package/components/slider/meta.json

@@ -4,20 +4,20 @@
   "description": "A carousel of images with optional title, text and button per slide. Without JavaScript it is a snapping horizontal scroller; Embla adds paging, arrows and dots.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "KitImage.astro", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "image.ts", "types.ts"],
   "variants": {
     "perView": { "options": ["1", "2", "3"], "default": "1", "description": "Slides visible at once on wide screens." },
     "aspect": { "options": ["wide", "standard", "square"], "default": "wide", "description": "Image aspect ratio: 21:9, 3:2 or 1:1." },
     "caption": { "options": ["below", "overlay"], "default": "overlay", "description": "Caption under the image, or over its lower edge on a gradient." }
   },
   "props": {
-    "slides": { "type": "array", "required": true, "items": { "type": "object", "fields": { "image": { "type": "object", "required": true, "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } } }, "title": { "type": "string" }, "text": { "type": "text" }, "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } } } } }, "description": "Slides; image is an ImageInput, action an ActionInput." },
-    "label": { "type": "string", "required": true, "description": "Accessible name of the carousel." },
-    "prevLabel": { "type": "string", "description": "ui-strings slider.prev." },
-    "nextLabel": { "type": "string", "description": "ui-strings slider.next." },
-    "slideLabel": { "type": "string", "description": "ui-strings slider.slide." },
-    "ofLabel": { "type": "string", "description": "ui-strings slider.of." },
-    "loop": { "type": "boolean", "default": false, "description": "Wrap from the last slide to the first." }
+    "slides": { "type": "array", "label": "Slides", "required": true, "items": { "type": "object", "fields": { "image": { "type": "image", "label": "Image", "required": true, "description": "The slide image." }, "imageAlt": { "type": "string", "label": "Image description", "description": "What the image shows, for readers who cannot see it." }, "title": { "type": "string", "label": "Title", "description": "Heading over the slide." }, "text": { "type": "text", "label": "Text", "description": "A line or two under the heading." }, "ctaLabel": { "type": "string", "label": "Button label", "description": "Button text; the slide has no button without it." }, "ctaHref": { "type": "url", "label": "Button link", "description": "Where the button goes." } } }, "description": "Slides: the image's address and text, and an optional link (ctaLabel + ctaHref)." },
+    "label": { "type": "string", "required": true, "content": false, "description": "Accessible name of the carousel." },
+    "prevLabel": { "type": "string", "content": false, "description": "ui-strings slider.prev." },
+    "nextLabel": { "type": "string", "content": false, "description": "ui-strings slider.next." },
+    "slideLabel": { "type": "string", "content": false, "description": "ui-strings slider.slide." },
+    "ofLabel": { "type": "string", "content": false, "description": "ui-strings slider.of." },
+    "loop": { "type": "boolean", "default": false, "content": false, "description": "Wrap from the last slide to the first." }
   },
   "slots": {},
   "js": "embla",

package/components/split/Split.astro

@@ -0,0 +1,64 @@
+---
+// An image beside a block of text: eyebrow, heading, a markdown body and
+// buttons. The image takes either side on wide screens and stacks above the
+// text on phones.
+import { tv } from 'tailwind-variants'
+import { renderMarkdown } from '../../../lib/markdown'
+import Button from '../_shared/Button.astro'
+import KitImage from '../_shared/KitImage.astro'
+import Section from '../_shared/Section.astro'
+import type { ActionInput, ImageInput } from '../_shared/types'
+
+const split = tv({
+  slots: {
+    grid: 'grid items-center gap-10 md:grid-cols-2 md:gap-16',
+    copy: 'flex flex-col gap-5',
+    eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
+    heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
+    body: 'prose prose-site max-w-none text-pretty',
+    actions: 'flex flex-wrap gap-3 pt-2',
+    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
+  },
+  variants: {
+    // Source order is text first; `start` moves the image before it on wide screens only.
+    imageSide: { start: { media: 'md:order-first' }, end: {} },
+    align: { start: {}, center: { copy: 'items-center text-center', actions: 'justify-center' } },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
+    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100' } },
+  },
+  defaultVariants: { imageSide: 'end', align: 'start', tone: 'default' },
+})
+
+interface Props {
+  heading: string
+  eyebrow?: string | undefined
+  /** Markdown, rendered at build time. */
+  body?: string | undefined
+  actions?: ActionInput[] | undefined
+  image?: ImageInput | undefined
+  imageSide?: 'start' | 'end' | undefined
+  align?: 'start' | 'center' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const { heading, eyebrow, body, actions = [], image, imageSide, align, tone, id } = Astro.props
+const s = split({ imageSide, align, tone })
+const headingId = id ? `${id}-title` : undefined
+const html = await renderMarkdown(body)
+---
+<Section tone={tone} id={id} aria-labelledby={headingId}>
+  <div class={s.grid()}>
+    <div class={s.copy()}>
+      {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
+      <h2 id={headingId} class={s.heading()}>{heading}</h2>
+      {html && <div class={s.body()} data-kit-text set:html={html} />}
+      {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
+    </div>
+    {image && (
+      <div class={s.media()}>
+        <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class="h-auto w-full object-cover" />
+      </div>
+    )}
+  </div>
+</Section>

package/components/split/fixtures.json

@@ -0,0 +1,6 @@
+[
+  { "name": "end-default", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
+  { "name": "start-muted", "props": { "imageSide": "start", "tone": "muted", "heading": "Content you can edit", "body": "Pages live as structured content in your own repository, editable in [Contentrain Studio](/studio/).", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } },
+  { "name": "center-inverse", "props": { "align": "center", "tone": "inverse", "heading": "Fast by default", "body": "Static HTML and one stylesheet.", "actions": [{ "label": "See the numbers", "href": "/performance/" }], "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1200, "height": 800 } } },
+  { "name": "accent", "props": { "tone": "accent", "eyebrow": "New", "heading": "Now with search", "body": "Every page is indexed at build time.", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "", "width": 1200, "height": 800 } } }
+]

package/components/split/meta.json

@@ -0,0 +1,154 @@
+{
+  "id": "split",
+  "name": "Split",
+  "description": "An image beside a block of text — eyebrow, heading, a markdown body and buttons — on either side, stacked on phones. The media-and-text section of a landing page (Gutenberg media-text, a two-column Elementor container with an image, Divi's image + text row).",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Button.astro",
+    "KitImage.astro",
+    "Section.astro",
+    "types.ts"
+  ],
+  "variants": {
+    "imageSide": {
+      "options": [
+        "start",
+        "end"
+      ],
+      "default": "end",
+      "description": "Which side the image takes on wide screens: start (left in left-to-right text) or end. Phones always show it after the text."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center"
+      ],
+      "default": "start",
+      "description": "Alignment of the text block."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "required": true,
+      "description": "The section heading."
+    },
+    "eyebrow": {
+      "type": "string",
+      "label": "Eyebrow",
+      "description": "Short line above the heading."
+    },
+    "body": {
+      "type": "markdown",
+      "label": "Text",
+      "description": "The text beside the image, as markdown: paragraphs, emphasis, links, lists."
+    },
+    "actions": {
+      "type": "array",
+      "label": "Buttons",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "label": "Label",
+            "required": true,
+            "description": "The button text."
+          },
+          "href": {
+            "type": "url",
+            "label": "Link",
+            "required": true,
+            "description": "Where the button goes: a page on this site or a full address."
+          },
+          "newTab": {
+            "type": "boolean",
+            "label": "Open in a new tab",
+            "description": "Open the link in a new tab (an external site the reader should not leave for)."
+          },
+          "style": {
+            "type": "select",
+            "label": "Style",
+            "options": [
+              "primary",
+              "secondary",
+              "ghost"
+            ],
+            "description": "primary for the main action, secondary or ghost for the ones beside it."
+          }
+        }
+      },
+      "description": "Buttons under the text, in order (Elementor button, Gutenberg buttons, Divi button)."
+    },
+    "image": {
+      "type": "object",
+      "label": "Image",
+      "fields": {
+        "src": {
+          "type": "image",
+          "label": "Image",
+          "required": true,
+          "description": "The image file."
+        },
+        "alt": {
+          "type": "string",
+          "label": "Image description",
+          "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
+        },
+        "width": {
+          "type": "integer",
+          "label": "Width",
+          "description": "Width in pixels, as uploaded."
+        },
+        "height": {
+          "type": "integer",
+          "label": "Height",
+          "description": "Height in pixels, as uploaded."
+        }
+      },
+      "description": "The image beside the text. Width and height, when known, let the site reserve its space."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/media-text"
+    ],
+    "elementor": [
+      "elementor/image-box"
+    ],
+    "divi": [
+      "divi/et_pb_image"
+    ]
+  },
+  "a11y": "The section is labelled by its heading. The image is a separate figure in reading order after the text; an empty description marks a decorative one.",
+  "pattern": {
+    "summary": "image beside heading + text",
+    "signals": [
+      "2 columns",
+      "1 image",
+      "heading",
+      "text",
+      "0–2 buttons"
+    ]
+  }
+}

package/components/stats/Stats.astro

@@ -0,0 +1,66 @@
+---
+// A row of figures, each with a short label, under an optional heading and
+// intro. Figures are static text: no counting animation.
+import { tv } from 'tailwind-variants'
+import Section, { type Tone } from '../_shared/Section.astro'
+
+const stats = tv({
+  slots: {
+    list: 'grid grid-cols-2 gap-6 md:gap-8',
+    item: 'flex flex-col-reverse gap-1',
+    value: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight tabular-nums md:text-5xl',
+    label: 'text-sm opacity-80',
+  },
+  variants: {
+    columns: {
+      '2': { list: 'md:grid-cols-2' },
+      '3': { list: 'md:grid-cols-3' },
+      '4': { list: 'md:grid-cols-4' },
+    },
+    style: {
+      plain: {},
+      card: { item: 'rounded-[var(--radius-card)] bg-surface p-6 text-ink ring-1 ring-line/60' },
+    },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops it under 4.5:1 (WCAG 1.4.3).
+    tone: { default: {}, muted: {}, inverse: {}, accent: { label: 'opacity-100' } },
+  },
+  defaultVariants: { columns: '3', style: 'plain', tone: 'default' },
+})
+
+interface Item {
+  value: string
+  label: string
+  prefix?: string | undefined
+  suffix?: string | undefined
+}
+
+interface Props {
+  heading?: string | undefined
+  intro?: string | undefined
+  items: Item[]
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'plain' | 'card' | undefined
+  tone?: Tone | undefined
+  id?: string | undefined
+}
+
+const { heading, intro, items, columns, style, tone, id } = Astro.props
+const s = stats({ columns, style, tone })
+const headingId = heading && id ? `${id}-title` : undefined
+---
+<Section tone={tone} id={id} aria-labelledby={headingId}>
+  {(heading || intro) && (
+    <header class="mb-10 flex max-w-2xl flex-col gap-3">
+      {heading && <h2 id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</h2>}
+      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']} data-kit-text>{intro}</p>}
+    </header>
+  )}
+  <dl class={s.list()}>
+    {items.map(item => (
+      <div class={s.item()}>
+        <dt class={s.label()}>{item.label}</dt>
+        <dd class={s.value()}>{item.prefix}{item.value}{item.suffix}</dd>
+      </div>
+    ))}
+  </dl>
+</Section>

package/components/stats/fixtures.json

@@ -0,0 +1,98 @@
+[
+  {
+    "name": "three-plain",
+    "props": {
+      "heading": "By the numbers",
+      "intro": "A decade of shipping sites for small teams.",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        }
+      ]
+    }
+  },
+  {
+    "name": "four-card-muted",
+    "props": {
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        },
+        {
+          "value": "2",
+          "label": "Revenue handled",
+          "prefix": "$",
+          "suffix": "M"
+        }
+      ],
+      "columns": "4",
+      "style": "card",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "two-inverse",
+    "props": {
+      "heading": "Results",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        }
+      ],
+      "columns": "2",
+      "tone": "inverse"
+    }
+  },
+  {
+    "name": "card-accent",
+    "props": {
+      "heading": "Our reach",
+      "items": [
+        {
+          "value": "12",
+          "label": "Years in business",
+          "suffix": "+"
+        },
+        {
+          "value": "480",
+          "label": "Clients served"
+        },
+        {
+          "value": "99.9",
+          "label": "Uptime",
+          "suffix": "%"
+        }
+      ],
+      "style": "card",
+      "tone": "accent"
+    }
+  }
+]