lion-make 0.1.0 → 0.3.0

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: '',
+    },
+  ]}
+/>
+```

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

@@ -0,0 +1,55 @@
+# RTB - Dynamic
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+RTB (Reasons To Buy) variant that renders a responsive grid of benefit cards from a structured data source. Use when the number of items is variable or content-managed at runtime. Supports optional icons and horizontal rule separators.
+
+Compare with:
+- `RTBDescriptive` — text-heavy, explanatory body per item
+- `RTBHighlight` — large stat/number callouts
+- `RTBs` — illustration + short text list
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `items` | `RTBDynamicItem[]` | Yes | Array of benefit cards |
+| `heading` | `string` | No | Section heading |
+| `columns` | `2 \| 3 \| 4` | No | Number of grid columns (default: `3`) |
+| `showDividers` | `boolean` | No | Horizontal rules between rows (default: `false`) |
+| `className` | `string` | No | Additional CSS class |
+
+### RTBDynamicItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Card title |
+| `body` | `string` | No | Supporting copy (1–2 sentences) |
+| `iconSrc` | `string` | No | Icon URL |
+| `iconAlt` | `string` | No | Icon alt text |
+
+## Usage
+
+```tsx
+import { RTBDynamic } from 'lion-make'
+
+<RTBDynamic
+  heading="What's included"
+  columns={3}
+  items={[
+    { iconSrc: '/icons/shield.svg', iconAlt: '', heading: 'Death benefit', body: 'Tax-free lump sum paid to your beneficiary.' },
+    { iconSrc: '/icons/calendar.svg', iconAlt: '', heading: 'Flexible terms', body: '10, 20, or 30-year term options.' },
+    { iconSrc: '/icons/dollar.svg', iconAlt: '', heading: 'Level premiums', body: 'Locked-in rate for the life of your policy.' },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Grid gap: `var(--Grid-gutter-size)`
+- Card border: `var(--border-width-thin)` solid `var(--color-line)`
+- Card border-radius: `var(--border-radius-base)`
+- Heading: `var(--h4-font-size)`, `var(--font-weight-600)`
+- Body: `var(--body-font-size)`, `var(--font-weight-400)`

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

@@ -0,0 +1,50 @@
+# RTB - Highlight
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+RTB (Reasons To Buy) variant using large stat/metric callouts as the primary visual hook. Each item leads with a bold number or short phrase, followed by a brief label. Use when data communicates trust more effectively than prose.
+
+Compare with:
+- `RTBDescriptive` — text-heavy, explanatory body per item
+- `RTBDynamic` — multi-column grid driven by a data source
+- `RTBs` — illustration + short text list
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `items` | `RTBHighlightItem[]` | Yes | Array of stat items (3–5 recommended) |
+| `heading` | `string` | No | Optional section heading |
+| `layout` | `'row' \| 'column'` | No | Arrangement direction (default: `'row'`) |
+| `className` | `string` | No | Additional CSS class |
+
+### RTBHighlightItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `stat` | `string` | Yes | The headline number or short phrase (e.g., "100+ years", "A+ rating") |
+| `label` | `string` | Yes | Brief description of what the stat represents |
+
+## Usage
+
+```tsx
+import { RTBHighlight } from 'lion-make'
+
+<RTBHighlight
+  heading="Trusted by families since 1909"
+  items={[
+    { stat: '100+', label: 'Years in business' },
+    { stat: 'A+', label: 'AM Best financial strength rating' },
+    { stat: '$2.4B', label: 'Claims paid in 2023' },
+    { stat: '4M+', label: 'Customers nationwide' },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Stat text: `var(--h1-font-size)`, `var(--font-weight-700)`, `var(--color-brand)`
+- Label text: `var(--h5-font-size)`, `var(--font-weight-400)`, `var(--color-gray-dark)`
+- Dividers between items: `var(--border-width-thin)` solid `var(--color-line)`

package/guidelines/content-types/general/side-menu-explorer.md

@@ -0,0 +1,62 @@
+# Side Menu Explorer
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+## Description
+
+A vertically-stacked tabbed navigation that controls which content panel is visible. Renders as a left-side menu with a persistent panel to the right. Typically used on product and category pages to let users explore coverage options without navigating away.
+
+This component is structural (contains panels), so it must not be nested inside another Container.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `items` | `SideMenuExplorerItem[]` | Yes | Tabs and their associated panels |
+| `defaultActiveIndex` | `number` | No | Index of the tab to show on load (default: `0`) |
+| `heading` | `string` | No | Accessible heading above the menu |
+| `className` | `string` | No | Additional CSS class |
+
+### SideMenuExplorerItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `label` | `string` | Yes | Tab button label |
+| `panelContent` | `React.ReactNode` | Yes | Content rendered when this tab is active |
+| `id` | `string` | No | Unique ID (used for `aria-controls`; auto-generated if omitted) |
+
+## Usage
+
+```tsx
+import { SideMenuExplorer } from 'lion-make'
+
+<SideMenuExplorer
+  heading="Explore our life insurance options"
+  items={[
+    {
+      label: 'Term Life',
+      panelContent: <TermLifePanel />,
+    },
+    {
+      label: 'Whole Life',
+      panelContent: <WholeLifePanel />,
+    },
+    {
+      label: 'Universal Life',
+      panelContent: <UniversalLifePanel />,
+    },
+  ]}
+/>
+```
+
+## Accessibility
+
+- Menu uses `role="tablist"`, each tab `role="tab"`, each panel `role="tabpanel"`.
+- Active tab has `aria-selected="true"`.
+- Panel linked via `aria-labelledby`.
+
+## Design Tokens
+
+- Menu background: `var(--color-gray-lightest)`
+- Active tab: left border `var(--border-width-thick)` solid `var(--color-brand)`, text `var(--color-brand)`, `var(--font-weight-600)`
+- Inactive tab: `var(--color-gray-dark)`, `var(--font-weight-400)`