lion-make 0.2.0 → 0.3.0

package/guidelines/content-types/general/inline-message.md

@@ -0,0 +1,36 @@
+# Inline Message
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A contextual alert or status message placed within the content flow. Used to surface important information, warnings, or errors at the point of relevance — not as a page-wide banner.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `type` | `'info' \| 'warning' \| 'success' \| 'error'` | Yes | — | Message severity |
+| `message` | `string` | Yes | — | Message body |
+| `heading` | `string` | No | — | Optional bold heading |
+| `dismissible` | `boolean` | No | `false` | Show a dismiss (×) button |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { InlineMessage } from 'lion-make'
+
+<InlineMessage type="warning" heading="Open enrollment closes soon" message="You have 7 days left to make changes to your coverage." dismissible />
+
+<InlineMessage type="success" message="Your application has been submitted successfully." />
+```
+
+## Design Token Map
+
+| Type | Background | Text/border color |
+|---|---|---|
+| `info` | `--color-teal-tint` | `--color-teal-dark` / `--color-teal` |
+| `warning` | `--color-yellow-light` | `--color-yellow` |
+| `success` | `--color-green-light` | `--color-green` |
+| `error` | `--color-red-light` | `--color-red` |

package/guidelines/content-types/general/last-chance-block.md

@@ -0,0 +1,40 @@
+# Last Chance Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A high-visual-weight urgency block for enrollment deadlines or limited-time offers. Uses the blue-to-teal gradient. Use once per page maximum — high frequency dilutes impact.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Main urgency message |
+| `body` | `string` | Yes | Supporting copy |
+| `ctaLabel` | `string` | Yes | CTA button label |
+| `ctaHref` | `string` | Yes | CTA destination |
+| `deadline` | `string` | No | Deadline label (e.g., "December 7") |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { LastChanceBlock } from 'lion-make'
+
+<LastChanceBlock
+  deadline="December 7"
+  heading="Medicare Open Enrollment ends soon"
+  body="Review your plan options and make changes before the deadline."
+  ctaLabel="Compare plans now"
+  ctaHref="/medicare/compare"
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--gradient-blue-to-teal)`
+- Text: `var(--color-white)`
+- Heading: `var(--h1-font-size)`, `var(--font-weight-700)`
+- CTA: `var(--color-white)` background, `var(--color-brand)` text
+- Deadline label: uppercase, `var(--font-weight-600)`

package/guidelines/content-types/general/multi-step-lead-form.md

@@ -0,0 +1,60 @@
+# Multi-Step Lead Form
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A guided multi-step form that breaks a long lead capture flow into smaller steps. Each step shows a subset of fields and a progress bar. Use when LeadForm would have more than 5–6 fields.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `steps` | `FormStep[]` | Yes | Array of steps, each with a title and fields |
+| `submitLabel` | `string` | No | Final step submit button label (default: "Submit") |
+| `onSubmit` | `(data: Record<string, string>) => void` | No | Called on final step submission with all collected data |
+| `mediaCode` | `string` | No | Campaign tracking code for attribution |
+| `className` | `string` | No | Additional CSS class |
+
+### FormStep
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `title` | `string` | Yes | Step label shown above the form |
+| `fields` | `LeadFormField[]` | Yes | Fields to show on this step (same type as `LeadForm`) |
+
+## Usage
+
+```tsx
+import { MultiStepLeadForm } from 'lion-make'
+
+<MultiStepLeadForm
+  steps={[
+    {
+      title: 'About you',
+      fields: [
+        { name: 'firstName', label: 'First Name', type: 'text', required: true },
+        { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+        { name: 'dob', label: 'Date of Birth', type: 'text', required: true },
+      ],
+    },
+    {
+      title: 'Contact info',
+      fields: [
+        { name: 'email', label: 'Email', type: 'email', required: true },
+        { name: 'phone', label: 'Phone', type: 'tel' },
+        { name: 'state', label: 'State', type: 'select', required: true, options: ['NE', 'IA', 'KS'] },
+      ],
+    },
+  ]}
+  submitLabel="Get my quote"
+  mediaCode="CAMP-2024-Q1"
+  onSubmit={(data) => submitLead(data)}
+/>
+```
+
+## Design Tokens
+
+- Progress bar active: `var(--color-brand)`
+- Progress bar inactive: `var(--color-gray-light)`
+- Submit button: `var(--color-brand)` background, `var(--color-white)` text

package/guidelines/content-types/general/multi-testimonial.md

@@ -0,0 +1,49 @@
+# Multi-Testimonial
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A responsive grid of customer or member testimonials. Supports optional star ratings, author photos, and role attribution. Use to build social proof near conversion points.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `testimonials` | `Testimonial[]` | Yes | Array of testimonials (recommended: 2–6) |
+| `heading` | `string` | No | Optional section heading |
+| `className` | `string` | No | Additional CSS class |
+
+### Testimonial
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `quote` | `string` | Yes | The testimonial text |
+| `author` | `string` | Yes | Name of the person |
+| `role` | `string` | No | Job title, location, or product context |
+| `imageSrc` | `string` | No | Author photo URL |
+| `imageAlt` | `string` | No | Photo alt text (defaults to author name) |
+| `rating` | `1 \| 2 \| 3 \| 4 \| 5` | No | Star rating |
+
+## Usage
+
+```tsx
+import { MultiTestimonial } from 'lion-make'
+
+<MultiTestimonial
+  heading="What our customers say"
+  testimonials={[
+    { quote: 'Getting coverage was easier than I expected.', author: 'Sarah M.', role: 'Term Life customer', rating: 5 },
+    { quote: 'The price was right and the process was simple.', author: 'James T.', role: 'Whole Life customer', rating: 5 },
+    { quote: 'Finally found a plan that fits my budget.', author: 'Linda K.', role: 'Medicare Supplement customer', rating: 4 },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Card background: `var(--color-gray-lightest)`
+- Card border radius: `var(--border-radius-base)`
+- Star color: `var(--color-gold)`
+- Quote: italic, `var(--font-size-base)`
+- Author: `var(--font-weight-600)`

package/guidelines/content-types/general/opt-in.md

@@ -0,0 +1,42 @@
+# Opt-In
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+Email marketing opt-in block. Captures an email address with explicit consent checkbox. Distinct from `EmailCalloutBlock` (no consent) and `LeadForm` (multi-field, sales intent). Use when CAN-SPAM/TCPA compliance requires a documented opt-in.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `heading` | `string` | Yes | — | Block headline |
+| `body` | `string` | No | — | Supporting copy |
+| `emailLabel` | `string` | No | `'Email address'` | Field label |
+| `submitLabel` | `string` | No | `'Sign me up'` | Submit button label |
+| `onSubmit` | `(email: string, optedIn: boolean) => void` | No | — | Submission callback |
+| `defaultChecked` | `boolean` | No | `false` | Pre-check the consent box |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { OptIn } from 'lion-make'
+
+<OptIn
+  heading="Get coverage tips in your inbox"
+  body="Monthly guidance on protecting your family — unsubscribe anytime."
+  submitLabel="Sign me up"
+  onSubmit={(email, optedIn) => { if (optedIn) subscribeToMarketing(email) }}
+/>
+```
+
+## Compliance Note
+
+The `optedIn` boolean in the callback is the user's explicit consent. Do not add them to marketing lists if `optedIn` is `false`.
+
+## Design Tokens
+
+- Submit: `var(--color-brand)` background, `var(--color-white)` text
+- Input border: `var(--border-width-base)` solid `var(--color-line)`
+- Consent text: `var(--h6-font-size)`, `var(--color-gray-dark)`

package/guidelines/content-types/general/overview.md

@@ -8,39 +8,149 @@ General content types make up the bulk of page body content. They are the most v
 
 | Content Type | Component | Primary Column | Sideburn | Outro |
 |---|---|---|---|---|
-| CTA | `CTA` | Yes | Yes | Yes |
-| Call-Out | `CallOut` | Yes | Yes | Yes |
-| RTBs | `RTBs` | Yes | Yes | Yes |
+| Accordion Block | `AccordionBlock` | Yes | Yes | Yes |
+| All Blogs Post Block | `AllBlogsPostBlock` | Yes | No | No |
+| Background Color Block | `BackgroundColorBlock` | Yes | Yes | Yes |
+| Basic Content Block | `BasicContentBlock` | Yes | Yes | Yes |
+| Body Text Copy Block | `BodyTextCopyBlock` | Yes | Yes | Yes |
+| Call-Out Block | `CallOut` | Yes | Yes | Yes |
 | Confidence Tags | `ConfidenceTags` | Yes | Yes | Yes |
+| Content Image Block | `ContentImageBlock` | Yes | Yes | Yes |
+| Cross-Sell Card Block | `CrossSellCardBlock` | Yes | No | Yes |
+| CTA | `CTA` | Yes | Yes | Yes |
+| Decorative List Block | `DecorativeListBlock` | Yes | Yes | Yes |
+| Email Call-out Block | `EmailCalloutBlock` | Yes | No | Yes |
+| Embedded Video Block | `EmbeddedVideoBlock` | Yes | No | Yes |
+| Full Size Image with Highlight Box | `FullSizeImageWithHighlightBox` | Yes | No | No |
+| Horizontal Rule | `HorizontalRule` | Yes | Yes | Yes |
+| Hot Jobs Block | `HotJobsBlock` | Yes | No | Yes |
+| Inline Message | `InlineMessage` | Yes | Yes | Yes |
+| Last Chance Block | `LastChanceBlock` | Yes | No | Yes |
 | Lead Form | `LeadForm` | Yes | No | Yes |
+| Multi-Step Lead Form | `MultiStepLeadForm` | Yes | No | Yes |
+| Multi-Testimonial | `MultiTestimonial` | Yes | No | Yes |
+| Opt-In | `OptIn` | Yes | No | Yes |
+| Product Block | `ProductBlock` | Yes | Yes | Yes |
+| Pull Quote | `PullQuote` | Yes | Yes | Yes |
+| Recent Blog Posts Block | `RecentBlogPostsBlock` | Yes | No | Yes |
+| Resource Spotlight | `ResourceSpotlight` | Yes | No | Yes |
 | Rich Text | `RichText` | Yes | Yes | Yes |
+| RTB - Descriptive | `RTBDescriptive` | Yes | Yes | Yes |
+| RTB - Dynamic | `RTBDynamic` | Yes | No | Yes |
+| RTB - Highlight | `RTBHighlight` | Yes | No | Yes |
+| RTBs | `RTBs` | Yes | Yes | Yes |
+| Side Menu Explorer | `SideMenuExplorer` | Yes | No | No |
+| Simple CTA Block | `SimpleCTABlock` | Yes | Yes | Yes |
+| Spacing Block | `SpacingBlock` | Yes | Yes | Yes |
+| Speed Bump | `SpeedBump` | Yes | Yes | Yes |
+| Table Block | `TableBlock` | Yes | No | Yes |
+| WAHFU | `WAHFU` | Yes | No | Yes |
+
+**Sideburn column restriction:** Wide, multi-column, or form-heavy content types are not allowed in the narrow 4-col Sideburn column. Use it for compact supporting content only.
+
+## Decision Tree: Which general content type?
 
-**Note:** Lead Form is not allowed in the Sideburn column — use it in Primary Column or Outro only.
-
-## Placement Example
-
-```tsx
-import { Section, Container, CTA, RTBs } from 'lion-make'
-
-<Section zone="primary-column">
-  <Container type="single">
-    <RTBs items={[
-      { heading: 'Affordable', body: 'Plans starting at $0.99 per month.' },
-      { heading: 'No pressure', body: 'No sales calls. Cancel anytime.' },
-      { heading: 'Real data', body: 'Actual coach contacts and roster openings.' },
-    ]} />
-  </Container>
-  <Container type="single">
-    <CTA type="button" label="Start for $0.99" href="/start" variant="primary" />
-  </Container>
-</Section>
 ```
+Is it a form collecting user data?
+  → Single-field email → EmailCalloutBlock
+  → Multi-field → LeadForm
+  → Multi-step guided → MultiStepLeadForm
+  → Email opt-in consent → OptIn
+
+Is it a CTA (button/link/phone)?
+  → Standalone with context → SimpleCTABlock
+  → Pure CTA element → CTA
+  → Highlighted block → CallOut
+
+Is it a value proposition list?
+  → Long explanatory copy → RTBDescriptive
+  → Stat/number callouts → RTBHighlight
+  → Data-driven grid → RTBDynamic
+  → Illustration list → RTBs
+
+Is it a trust signal?
+  → Badge trio → ConfidenceTags
+  → Customer quotes → MultiTestimonial
+  → Single pull quote → PullQuote
+  → Empathy/support → WAHFU
+
+Is it media content?
+  → Image → ContentImageBlock
+  → Full-width image + overlay → FullSizeImageWithHighlightBox
+  → Video → EmbeddedVideoBlock
+
+Is it structured or reference content?
+  → Collapsible Q&A → AccordionBlock
+  → Tabbed explorer → SideMenuExplorer
+  → Data table → TableBlock
+  → Styled list → DecorativeListBlock
+
+Is it a product or cross-sell?
+  → Single product → ProductBlock
+  → Multiple products → CrossSellCardBlock
+  → Related resource → ResourceSpotlight
+
+Is it urgency-driven?
+  → Deadline/enrollment → LastChanceBlock
+
+Is it platform-specific?
+  → Blog post list → AllBlogsPostBlock / RecentBlogPostsBlock
+  → Job listings → HotJobsBlock
+
+Is it layout/utility?
+  → Vertical whitespace → SpacingBlock
+  → Divider → HorizontalRule
+  → Background color wrapper → BackgroundColorBlock
+  → External link warning → SpeedBump
+  → Body prose → BodyTextCopyBlock / RichText
+```
+
+## Platform-Specific Content Types
+
+Some general content types are restricted to specific platforms:
+
+| Content Type | Platform restriction |
+|---|---|
+| `AllBlogsPostBlock` | Marketing - Blog only |
+| `RecentBlogPostsBlock` | Marketing - Blog only |
+| `HotJobsBlock` | Marketing - Careers only |
 
 ## Files in This Section
 
-- [cta.md](./cta.md)
+- [accordion-block.md](./accordion-block.md)
+- [all-blogs-post-block.md](./all-blogs-post-block.md)
+- [background-color-block.md](./background-color-block.md)
+- [basic-content-block.md](./basic-content-block.md)
+- [body-text-copy-block.md](./body-text-copy-block.md)
 - [callout.md](./callout.md)
-- [rtbs.md](./rtbs.md)
 - [confidence-tags.md](./confidence-tags.md)
+- [content-image-block.md](./content-image-block.md)
+- [cross-sell-card-block.md](./cross-sell-card-block.md)
+- [cta.md](./cta.md)
+- [decorative-list-block.md](./decorative-list-block.md)
+- [email-callout-block.md](./email-callout-block.md)
+- [embedded-video-block.md](./embedded-video-block.md)
+- [full-size-image-with-highlight-box.md](./full-size-image-with-highlight-box.md)
+- [horizontal-rule.md](./horizontal-rule.md)
+- [hot-jobs-block.md](./hot-jobs-block.md)
+- [inline-message.md](./inline-message.md)
+- [last-chance-block.md](./last-chance-block.md)
 - [lead-form.md](./lead-form.md)
+- [multi-step-lead-form.md](./multi-step-lead-form.md)
+- [multi-testimonial.md](./multi-testimonial.md)
+- [opt-in.md](./opt-in.md)
+- [product-block.md](./product-block.md)
+- [pull-quote.md](./pull-quote.md)
+- [recent-blog-posts-block.md](./recent-blog-posts-block.md)
+- [resource-spotlight.md](./resource-spotlight.md)
 - [rich-text.md](./rich-text.md)
+- [rtb-descriptive.md](./rtb-descriptive.md)
+- [rtb-dynamic.md](./rtb-dynamic.md)
+- [rtb-highlight.md](./rtb-highlight.md)
+- [rtbs.md](./rtbs.md)
+- [side-menu-explorer.md](./side-menu-explorer.md)
+- [simple-cta-block.md](./simple-cta-block.md)
+- [spacing-block.md](./spacing-block.md)
+- [speed-bump.md](./speed-bump.md)
+- [table-block.md](./table-block.md)
+- [wahfu.md](./wahfu.md)

package/guidelines/content-types/general/product-block.md

@@ -0,0 +1,43 @@
+# Product Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A product feature card combining an image, heading, body description, optional badge, and CTA. Use to highlight a single product or coverage option.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Product name or title |
+| `body` | `string` | Yes | Short product description |
+| `imageSrc` | `string` | No | Product image URL |
+| `imageAlt` | `string` | No | Image alt text |
+| `badgeLabel` | `string` | No | Small badge (e.g., "Most popular", "New") |
+| `ctaLabel` | `string` | No | CTA text |
+| `ctaHref` | `string` | No | CTA destination |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ProductBlock } from 'lion-make'
+
+<ProductBlock
+  imageSrc="/img/term-life.jpg"
+  imageAlt=""
+  badgeLabel="Most popular"
+  heading="Term Life Insurance"
+  body="Affordable coverage for 10, 20, or 30 years. Premiums never increase."
+  ctaLabel="Get a quote"
+  ctaHref="/term-life/quote"
+/>
+```
+
+## Design Tokens
+
+- Border radius: `var(--border-radius-base)`
+- Badge background: `var(--color-teal-opaque)`, text: `var(--color-brand)`
+- Heading: `var(--h2-font-size)`, `var(--font-weight-700)`
+- CTA: `var(--color-brand)` background, `var(--color-white)` text

package/guidelines/content-types/general/pull-quote.md

@@ -0,0 +1,36 @@
+# Pull Quote
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A typographically prominent quote extracted from surrounding content. Used to add editorial emphasis or break up long-form copy. Attribution is optional.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `quote` | `string` | Yes | The quoted text (without quotation marks — they are added by the component) |
+| `attribution` | `string` | No | Name of the person being quoted |
+| `role` | `string` | No | Title, role, or context for the attribution |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { PullQuote } from 'lion-make'
+
+<PullQuote
+  quote="The claims process was handled with such care and speed. It made a difficult time a little easier."
+  attribution="Patricia H."
+  role="Term Life policyholder, Nebraska"
+/>
+```
+
+## Design Tokens
+
+- Left border: `var(--border-width-thick)` solid `var(--color-brand)`
+- Quote font size: `var(--h2-font-size)`, weight `var(--font-weight-300)`, italic
+- Line height: `var(--h2-line-height)`
+- Attribution: `var(--font-weight-600)`, `var(--color-gray-dark)`
+- Role: `var(--font-weight-400)`, `var(--color-gray)`

package/guidelines/content-types/general/recent-blog-posts-block.md

@@ -0,0 +1,48 @@
+# Recent Blog Posts Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+**Platform restriction:** Blog platform only (`data-platform="blog"`).
+
+## Description
+
+Displays a curated or automatically-selected row of recent blog post cards. Use on product and landing pages to surface relevant content without leaving the page. Supports manual post selection or automatic "most recent N posts" mode.
+
+Different from `AllBlogsPostBlock`, which is a full paginated listing view for the blog index.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `posts` | `BlogPostItem[]` | Yes | — | Posts to display |
+| `heading` | `string` | No | `'Recent articles'` | Section heading |
+| `count` | `number` | No | `3` | Number of posts to display (1–6) |
+| `ctaLabel` | `string` | No | — | "View all" link label |
+| `ctaHref` | `string` | No | — | "View all" link destination |
+| `className` | `string` | No | — | Additional CSS class |
+
+### BlogPostItem
+
+| Prop | Type | Description |
+|---|---|---|
+| `title` | `string` | Post title |
+| `slug` | `string` | URL slug |
+| `excerpt` | `string` | Short summary |
+| `thumbnailSrc` | `string` | Card thumbnail URL |
+| `thumbnailAlt` | `string` | Thumbnail alt text |
+| `publishedAt` | `string` | ISO 8601 date |
+| `category` | `string` | Primary category label |
+
+## Usage
+
+```tsx
+import { RecentBlogPostsBlock } from 'lion-make'
+
+<RecentBlogPostsBlock
+  heading="More on life insurance"
+  posts={recentLifePosts}
+  count={3}
+  ctaLabel="See all articles"
+  ctaHref="/blog"
+/>
+```

package/guidelines/content-types/general/resource-spotlight.md

@@ -0,0 +1,44 @@
+# Resource Spotlight
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+Highlights a featured resource — an article, video, PDF download, calculator, or tool. Used to drive content engagement and surface self-service resources near relevant content.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `title` | `string` | Yes | Resource title |
+| `description` | `string` | Yes | Short summary |
+| `resourceType` | `'article' \| 'video' \| 'pdf' \| 'tool' \| 'calculator'` | Yes | Resource category (shown as a label) |
+| `imageSrc` | `string` | No | Thumbnail image URL |
+| `imageAlt` | `string` | No | Thumbnail alt text |
+| `ctaLabel` | `string` | No | Link text (defaults to "Download" or "View resource") |
+| `ctaHref` | `string` | No | Resource destination URL |
+| `downloadUrl` | `string` | No | Forces a download link when provided (takes priority over ctaHref) |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ResourceSpotlight } from 'lion-make'
+
+<ResourceSpotlight
+  resourceType="pdf"
+  title="Understanding Your Life Insurance Options"
+  description="A plain-language guide comparing term, whole, and universal life policies."
+  imageSrc="/img/guide-cover.jpg"
+  imageAlt=""
+  downloadUrl="/downloads/life-insurance-guide.pdf"
+  ctaLabel="Download guide (PDF)"
+/>
+```
+
+## Design Tokens
+
+- Border: `var(--border-width-thin)` solid `var(--color-line)`
+- Border radius: `var(--border-radius-base)`
+- Type label: `var(--color-brand)`, uppercase, `var(--h6-font-size)`
+- Title: `var(--h3-font-size)`, `var(--font-weight-600)`

package/guidelines/content-types/general/rtb-descriptive.md

@@ -0,0 +1,53 @@
+# RTB - Descriptive
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+RTB (Reasons To Buy) variant with longer explanatory body copy per item. Use when each value proposition needs more context than a headline alone can carry. Renders as a vertical list with optional spot illustrations.
+
+Compare with:
+- `RTBHighlight` — large stat/number callouts for visual impact
+- `RTBDynamic` — multi-column grid driven by a data source
+- `RTBs` — original illustration + short text list
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `items` | `RTBDescriptiveItem[]` | Yes | Array of reasons (min 2) |
+| `heading` | `string` | No | Optional section heading |
+| `className` | `string` | No | Additional CSS class |
+
+### RTBDescriptiveItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Value proposition headline |
+| `body` | `string` | Yes | Explanatory paragraph (2–4 sentences) |
+| `illustrationSrc` | `string` | No | Spot illustration URL |
+| `illustrationAlt` | `string` | No | Illustration alt text |
+
+## Usage
+
+```tsx
+import { RTBDescriptive } from 'lion-make'
+
+<RTBDescriptive
+  heading="Why families trust us"
+  items={[
+    {
+      heading: 'No hidden fees — ever',
+      body: 'Your premium is locked in on day one. It never increases for the life of your policy, regardless of age or health changes.',
+      illustrationSrc: '/icons/lock.svg',
+      illustrationAlt: '',
+    },
+    {
+      heading: 'Claims paid in days, not weeks',
+      body: 'Our claims team processes most straightforward claims within 5 business days. We assign a dedicated rep to every claim.',
+      illustrationSrc: '/icons/clock.svg',
+      illustrationAlt: '',
+    },
+  ]}
+/>
+```