@contentrain/astro-kit 0.30.0 → 0.32.0

package/components/pricing/fixtures.json

@@ -1,6 +1,290 @@
 [
-  {"name": "three-featured", "props": {"id": "pricing", "heading": "Pricing", "intro": "Start free, upgrade when the team grows.", "plans": [{"name": "Free", "price": "$0", "period": "/month", "description": "For one person and one site.", "features": "- 1 project\n- Git-backed content\n- Community support", "ctaLabel": "Start free", "ctaHref": "/signup/"}, {"name": "Pro", "price": "$12", "period": "/month", "description": "For freelancers.", "features": "- 5 projects\n- Media library\n- Email support", "ctaLabel": "Choose Pro", "ctaHref": "/signup/?plan=pro", "featured": true}, {"name": "Team", "price": "$29", "period": "/month", "description": "For studios and teams.", "features": "- Unlimited projects\n- Reviews and roles\n- Priority support", "ctaLabel": "Choose Team", "ctaHref": "/signup/?plan=team"}]}},
-  {"name": "two-muted", "props": {"columns": "2", "tone": "muted", "featuredLabel": "Best value", "plans": [{"name": "Monthly", "price": "€15", "period": "per month", "features": "- Cancel anytime", "ctaLabel": "Subscribe", "ctaHref": "/buy/monthly/"}, {"name": "Yearly", "price": "€150", "period": "per year", "features": "- Two months free\n- **Priority** support", "ctaLabel": "Subscribe", "ctaHref": "/buy/yearly/", "featured": true}]}},
-  {"name": "four-inverse", "props": {"columns": "4", "tone": "inverse", "heading": "Plans", "plans": [{"name": "Solo", "price": "$0", "features": "- 1 site"}, {"name": "Pro", "price": "$12", "period": "/mo", "features": "- 5 sites", "featured": true, "ctaLabel": "Buy", "ctaHref": "/buy/"}, {"name": "Team", "price": "$29", "period": "/mo", "features": "- 20 sites"}, {"name": "Enterprise", "price": "On request", "description": "Custom terms.", "ctaLabel": "Contact us", "ctaHref": "/contact/"}]}},
-  {"name": "accent", "props": {"tone": "accent", "heading": "One price", "plans": [{"name": "Studio", "price": "$49", "period": "once", "features": "- Everything", "ctaLabel": "Buy now", "ctaHref": "/buy/", "featured": true}, {"name": "Support", "price": "$9", "period": "/month", "features": "- Updates and help", "ctaLabel": "Add support", "ctaHref": "/buy/support/"}]}}
+  {
+    "name": "three-featured",
+    "props": {
+      "id": "pricing",
+      "heading": "Pricing",
+      "intro": "Start free, upgrade when the team grows.",
+      "plans": [
+        {
+          "name": "Free",
+          "price": "$0",
+          "period": "/month",
+          "description": "For one person and one site.",
+          "features": "- 1 project\n- Git-backed content\n- Community support",
+          "ctaLabel": "Start free",
+          "ctaHref": "/signup/"
+        },
+        {
+          "name": "Pro",
+          "price": "$12",
+          "period": "/month",
+          "description": "For freelancers.",
+          "features": "- 5 projects\n- Media library\n- Email support",
+          "ctaLabel": "Choose Pro",
+          "ctaHref": "/signup/?plan=pro",
+          "featured": true
+        },
+        {
+          "name": "Team",
+          "price": "$29",
+          "period": "/month",
+          "description": "For studios and teams.",
+          "features": "- Unlimited projects\n- Reviews and roles\n- Priority support",
+          "ctaLabel": "Choose Team",
+          "ctaHref": "/signup/?plan=team"
+        }
+      ]
+    }
+  },
+  {
+    "name": "two-muted",
+    "props": {
+      "columns": "2",
+      "tone": "muted",
+      "featuredLabel": "Best value",
+      "plans": [
+        {
+          "name": "Monthly",
+          "price": "€15",
+          "period": "per month",
+          "features": "- Cancel anytime",
+          "ctaLabel": "Subscribe",
+          "ctaHref": "/buy/monthly/"
+        },
+        {
+          "name": "Yearly",
+          "price": "€150",
+          "period": "per year",
+          "features": "- Two months free\n- **Priority** support",
+          "ctaLabel": "Subscribe",
+          "ctaHref": "/buy/yearly/",
+          "featured": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "four-inverse",
+    "props": {
+      "columns": "4",
+      "tone": "inverse",
+      "heading": "Plans",
+      "plans": [
+        {
+          "name": "Solo",
+          "price": "$0",
+          "features": "- 1 site"
+        },
+        {
+          "name": "Pro",
+          "price": "$12",
+          "period": "/mo",
+          "features": "- 5 sites",
+          "featured": true,
+          "ctaLabel": "Buy",
+          "ctaHref": "/buy/"
+        },
+        {
+          "name": "Team",
+          "price": "$29",
+          "period": "/mo",
+          "features": "- 20 sites"
+        },
+        {
+          "name": "Enterprise",
+          "price": "On request",
+          "description": "Custom terms.",
+          "ctaLabel": "Contact us",
+          "ctaHref": "/contact/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "accent",
+    "props": {
+      "tone": "accent",
+      "heading": "One price",
+      "plans": [
+        {
+          "name": "Studio",
+          "price": "$49",
+          "period": "once",
+          "features": "- Everything",
+          "ctaLabel": "Buy now",
+          "ctaHref": "/buy/",
+          "featured": true
+        },
+        {
+          "name": "Support",
+          "price": "$9",
+          "period": "/month",
+          "features": "- Updates and help",
+          "ctaLabel": "Add support",
+          "ctaHref": "/buy/support/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "table",
+    "props": {
+      "id": "compare",
+      "heading": "Compare plans",
+      "layout": "table",
+      "plans": [
+        {
+          "name": "Free",
+          "price": "$0",
+          "features": "- 1 project\n- Community support",
+          "ctaLabel": "Start",
+          "ctaHref": "/signup/"
+        },
+        {
+          "name": "Pro",
+          "price": "$12",
+          "period": "/month",
+          "features": "- 1 project\n- 5 projects\n- Media library\n- Email support",
+          "ctaLabel": "Choose",
+          "ctaHref": "/signup/?plan=pro",
+          "featured": true
+        },
+        {
+          "name": "Team",
+          "price": "$29",
+          "period": "/month",
+          "features": "- 1 project\n- 5 projects\n- Media library\n- Email support\n- Roles and reviews\n- Priority support\n- Audit log\n- SSO",
+          "ctaLabel": "Choose",
+          "ctaHref": "/signup/?plan=team"
+        }
+      ]
+    }
+  },
+  {
+    "name": "check-compact",
+    "props": {
+      "featureStyle": "check",
+      "compact": true,
+      "plans": [
+        {
+          "name": "Free",
+          "price": "$0",
+          "period": "/month",
+          "description": "For one person and one site.",
+          "features": "- 1 project\n- Git-backed content\n- Community support",
+          "ctaLabel": "Start free",
+          "ctaHref": "/signup/"
+        },
+        {
+          "name": "Pro",
+          "price": "$12",
+          "period": "/month",
+          "description": "For freelancers.",
+          "features": "- 5 projects\n- Media library\n- Email support",
+          "ctaLabel": "Choose Pro",
+          "ctaHref": "/signup/?plan=pro",
+          "featured": true
+        },
+        {
+          "name": "Team",
+          "price": "$29",
+          "period": "/month",
+          "description": "For studios and teams.",
+          "features": "- Unlimited projects\n- Reviews and roles\n- Priority support",
+          "ctaLabel": "Choose Team",
+          "ctaHref": "/signup/?plan=team"
+        }
+      ]
+    }
+  },
+  {
+    "name": "dot-features",
+    "props": {
+      "featureStyle": "dot",
+      "plans": [
+        {
+          "name": "Free",
+          "price": "$0",
+          "period": "/month",
+          "description": "For one person and one site.",
+          "features": "- 1 project\n- Git-backed content\n- Community support",
+          "ctaLabel": "Start free",
+          "ctaHref": "/signup/"
+        },
+        {
+          "name": "Pro",
+          "price": "$12",
+          "period": "/month",
+          "description": "For freelancers.",
+          "features": "- 5 projects\n- Media library\n- Email support",
+          "ctaLabel": "Choose Pro",
+          "ctaHref": "/signup/?plan=pro",
+          "featured": true
+        },
+        {
+          "name": "Team",
+          "price": "$29",
+          "period": "/month",
+          "description": "For studios and teams.",
+          "features": "- Unlimited projects\n- Reviews and roles\n- Priority support",
+          "ctaLabel": "Choose Team",
+          "ctaHref": "/signup/?plan=team"
+        }
+      ]
+    }
+  },
+  {
+    "name": "billing-toggle",
+    "props": {
+      "id": "billing",
+      "heading": "Billing",
+      "billingToggle": "radio",
+      "columns": "2",
+      "plans": [
+        {
+          "name": "Basic",
+          "price": "€15",
+          "period": "/month",
+          "priceAlt": "€150",
+          "periodAlt": "/year",
+          "features": "- 1 site",
+          "ctaLabel": "Subscribe",
+          "ctaHref": "/buy/basic/"
+        },
+        {
+          "name": "Plus",
+          "price": "€29",
+          "period": "/month",
+          "priceAlt": "€290",
+          "periodAlt": "/year",
+          "features": "- 5 sites\n- Priority support",
+          "ctaLabel": "Subscribe",
+          "ctaHref": "/buy/plus/",
+          "badge": "Best value"
+        }
+      ],
+      "billingMainLabel": "Monthly",
+      "billingAltLabel": "Yearly",
+      "billingLegend": "Billing period"
+    }
+  },
+  {
+    "name": "missing-period-description",
+    "props": {
+      "plans": [
+        {
+          "name": "Custom",
+          "price": "On request",
+          "ctaLabel": "Talk to us",
+          "ctaHref": "/contact/"
+        },
+        {
+          "name": "Open",
+          "price": "Free",
+          "features": "- Everything"
+        }
+      ]
+    }
+  }
 ]

package/components/pricing/meta.json

@@ -7,6 +7,7 @@
   "shared": [
     "Button.astro",
     "Section.astro",
+    "measured.ts",
     "types.ts"
   ],
   "variants": {
@@ -28,6 +29,31 @@
       ],
       "default": "default",
       "description": "Section background."
+    },
+    "layout": {
+      "options": [
+        "cards",
+        "table"
+      ],
+      "default": "cards",
+      "description": "cards: plans side by side. table: one comparison table, plans as columns and features as rows (for more than four plans)."
+    },
+    "featureStyle": {
+      "options": [
+        "check",
+        "dot",
+        "plain"
+      ],
+      "default": "plain",
+      "description": "The mark before each feature in the cards: a check, a dot, or the list's own bullets."
+    },
+    "billingToggle": {
+      "options": [
+        "none",
+        "radio"
+      ],
+      "default": "none",
+      "description": "radio: two labelled radios swap each plan's price for its priceAlt (monthly / yearly), with no script. The radio group is named from the section id, or a hash of the plans without one, so two toggles on a page stay independent."
     }
   },
   "props": {
@@ -89,6 +115,21 @@
             "type": "boolean",
             "label": "Featured",
             "description": "Raises the plan and gives it the badge."
+          },
+          "badge": {
+            "type": "string",
+            "label": "Badge",
+            "description": "A badge text on the plan (\"Best value\"); a featured plan without one reads the section's featuredLabel."
+          },
+          "priceAlt": {
+            "type": "string",
+            "label": "Price, other period",
+            "description": "The price for the other billing period (\"€150\"), shown when the toggle is on its second option."
+          },
+          "periodAlt": {
+            "type": "string",
+            "label": "Period, other period",
+            "description": "What the other price is per (\"/year\")."
           }
         }
       },
@@ -104,6 +145,152 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "compact": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "A denser card: smaller padding, gap and price."
+    },
+    "includedLabel": {
+      "type": "string",
+      "default": "Included",
+      "content": false,
+      "description": "Table cell text for readers where a plan has the feature."
+    },
+    "notIncludedLabel": {
+      "type": "string",
+      "default": "Not included",
+      "content": false,
+      "description": "Table cell text for readers where a plan lacks the feature."
+    },
+    "measured": {
+      "type": "object",
+      "content": false,
+      "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.",
+      "fields": {
+        "containerPx": {
+          "type": "integer",
+          "min": 0,
+          "max": 2560,
+          "description": "The frame's content width."
+        },
+        "padY": {
+          "type": "integer",
+          "min": 0,
+          "max": 400,
+          "description": "Top and bottom padding."
+        },
+        "padX": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "The frame's side padding (gutter)."
+        },
+        "bg": {
+          "type": "object",
+          "description": "The section's background.",
+          "fields": {
+            "color": {
+              "type": "string",
+              "description": "Fill colour: hex, rgb(a) or hsl(a)."
+            },
+            "image": {
+              "type": "string",
+              "description": "Background image address (http(s) or root-relative), drawn behind the content."
+            },
+            "overlay": {
+              "type": "string",
+              "description": "Colour or linear/radial gradient laid over the image or the fill."
+            },
+            "size": {
+              "type": "string",
+              "description": "cover, contain or auto; anything else draws as cover."
+            },
+            "position": {
+              "type": "string",
+              "description": "One or two of center/top/bottom/left/right or percentages."
+            }
+          }
+        },
+        "columns": {
+          "type": "object",
+          "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.",
+          "fields": {
+            "390": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Phone."
+            },
+            "768": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Tablet."
+            },
+            "1280": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Desktop."
+            }
+          }
+        },
+        "gap": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Gap between items."
+        },
+        "tone": {
+          "type": "select",
+          "options": [
+            "light",
+            "dark"
+          ],
+          "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides."
+        },
+        "align": {
+          "type": "select",
+          "options": [
+            "start",
+            "center",
+            "end"
+          ],
+          "description": "Where the heading and lead sit; read by a component whose own align is not set."
+        },
+        "radius": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Card and item corner radius."
+        },
+        "minHeight": {
+          "type": "integer",
+          "min": 0,
+          "max": 2000,
+          "description": "The section's minimum height."
+        }
+      }
+    },
+    "billingMainLabel": {
+      "type": "string",
+      "default": "Monthly",
+      "content": false,
+      "description": "First option of the billing toggle."
+    },
+    "billingAltLabel": {
+      "type": "string",
+      "default": "Yearly",
+      "content": false,
+      "description": "Second option of the billing toggle (the plans' priceAlt)."
+    },
+    "billingLegend": {
+      "type": "string",
+      "default": "Billing period",
+      "content": false,
+      "description": "Legend of the toggle, read to screen readers."
     }
   },
   "slots": {},
@@ -120,7 +307,7 @@
       "divi/et_pb_pricing_tables"
     ]
   },
-  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label.",
+  "a11y": "Plans are a <ul>; each name is an <h3> under the section's <h2>, or an <h2> when the section has no heading. A featured plan is marked by a text badge and a ring, not colour alone. Buttons are links with their own label. The table layout is a real <table> with a caption, column and row headers, and Included / Not included text in every cell; the billing toggle is a fieldset with a legend and labelled radios.",
   "pattern": {
     "summary": "repeated plan units: name + price + feature list + button",
     "signals": [

package/components/split/Split.astro

@@ -5,59 +5,121 @@
 import { tv } from 'tailwind-variants'
 import { renderMarkdown } from '../../../lib/markdown'
 import Button from '../_shared/Button.astro'
+import Embed from '../embed/Embed.astro'
+import FeatureList from '../feature-list/FeatureList.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
-import type { ActionInput, ImageInput } from '../_shared/types'
+import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 
 const split = tv({
   slots: {
-    grid: 'grid items-center gap-10 md:grid-cols-2 md:gap-16',
+    grid: 'grid items-center gap-10 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))]',
+    media: 'overflow-hidden',
+    image: 'h-auto w-full object-cover',
   },
   variants: {
     // Source order is text first; `start` moves the image before it on wide screens only.
     imageSide: { start: { media: 'md:order-first' }, end: {} },
+    // The text column's share against the image's (the columns follow the sides, see `columns` below).
+    ratio: { '1:1': {}, '5:7': {}, '7:5': {} },
+    // contain: the image at its own proportions. cover: it fills the column's height.
+    imageFit: { contain: {}, cover: { grid: 'items-stretch', media: 'min-h-72 md:h-full', image: 'h-full min-h-72' } },
+    imageShape: {
+      none: { media: 'rounded-none' },
+      rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
+      circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+    },
+    // edge: the image runs on to the viewport's edge on its side (wide screens).
+    imageBleed: { none: {}, edge: { media: 'rounded-none' } },
+    // Phones show the text first, as the source does, or the picture first when it is the content itself.
+    stackOrder: { 'text-first': {}, 'media-first': { media: 'max-md:order-first' } },
+    // The media column follows the reader down a long text (wide screens).
+    sticky: { true: { media: 'md:sticky md:top-8 md:self-start' }, false: {} },
     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' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100' }, brand: { eyebrow: 'opacity-100' }, none: {} },
   },
-  defaultVariants: { imageSide: 'end', align: 'start', tone: 'default' },
+  defaultVariants: { imageSide: 'end', ratio: '1:1', imageFit: 'contain', imageShape: 'rounded', imageBleed: 'none', stackOrder: 'text-first', sticky: false, align: 'start', tone: 'default' },
 })
 
+// Literal class names, so the stylesheet builder sees them: the text column's share first, the image's second; a
+// picture before the text on wide screens swaps the two columns.
+const COLUMNS = {
+  text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
+  image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
+} as const
+// The viewport's edge, from the content's edge: what is left of the page's width, halved.
+const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
+} as const
+
+interface Feature {
+  title: string
+  text?: string | undefined
+  /** A kit icon name (check, star, bolt, shield, heart, globe, clock, chat). */
+  icon?: string | undefined
+}
+
 interface Props {
   heading: string
+  /** The heading's level: 2 under the page title; 3 or 4 when the section sits inside another. */
+  headingLevel?: 2 | 3 | 4 | undefined
   eyebrow?: string | undefined
   /** Markdown, rendered at build time. */
   body?: string | undefined
   actions?: ActionInput[] | undefined
   image?: ImageInput | undefined
+  /** Short points under the text, each with a title and a line. */
+  features?: Feature[] | undefined
+  /** A video page (YouTube, Vimeo); the image is its poster and nothing loads from the provider until it is played. */
+  videoUrl?: string | undefined
+  /** The video's text for the play button. */
+  playLabel?: string | undefined
   imageSide?: 'start' | 'end' | undefined
+  ratio?: '1:1' | '5:7' | '7:5' | undefined
+  imageFit?: 'contain' | 'cover' | undefined
+  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  imageBleed?: 'none' | 'edge' | undefined
+  mediaKind?: 'image' | 'video' | undefined
+  featureStyle?: 'check' | 'icon' | undefined
+  stackOrder?: 'text-first' | 'media-first' | undefined
+  sticky?: boolean | undefined
   align?: 'start' | 'center' | undefined
-  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | 'brand' | 'none' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, eyebrow, body, actions = [], image, imageSide, align, tone, id } = Astro.props
-const s = split({ imageSide, align, tone })
+const { heading, headingLevel = 2, eyebrow, body, actions = [], image, features = [], videoUrl, playLabel, imageSide, ratio = '1:1', imageFit, imageShape, imageBleed, mediaKind, featureStyle = 'check', stackOrder, sticky = false, align, tone, measured, id } = Astro.props
+const s = split({ imageSide, ratio, imageFit, imageShape, imageBleed, stackOrder, sticky, align, tone })
+const Heading = `h${headingLevel}` as 'h2'
+const columns = COLUMNS[imageSide === 'start' ? 'image' : 'text'][ratio]
+const bleed = imageBleed === 'edge' ? BLEED[imageSide === 'start' ? 'start' : 'end'] : undefined
+const video = mediaKind === 'video' && videoUrl
 const headingId = id ? `${id}-title` : undefined
 const html = await renderMarkdown(body)
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId}>
-  <div class={s.grid()}>
+<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
+  <div class:list={[s.grid(), columns]}>
     <div class={s.copy()}>
       {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-      <h2 id={headingId} class={s.heading()}>{heading}</h2>
+      <Heading id={headingId} class={s.heading()}>{heading}</Heading>
       {html && <div class={s.body()} data-kit-text set:html={html} />}
+      {features.length > 0 && <FeatureList items={features} columns="2" style={featureStyle} tone={tone === 'brand' || tone === 'none' ? undefined : tone} bare titleLevel={Math.min(5, headingLevel + 1) as 3 | 4 | 5} />}
       {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" />
+    {(video || image) && (
+      <div class:list={[s.media(), bleed]}>
+        {video
+          ? <div class="[&>figure]:my-0 [&>figure]:max-w-none"><Embed url={videoUrl} title={heading} poster={image} playLabel={playLabel} aspect="video" width="page" /></div>
+          : image && <KitImage image={image} sizes="(min-width: 768px) 50vw, 100vw" class={s.image()} />}
       </div>
     )}
   </div>