lion-make 0.2.0 → 0.3.0

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

@@ -1,38 +1,95 @@
 # Footer Zone Content Types
 
-**Zone rule:** These content types can only be placed in the Footer zone. Never use them in Header, Hero, or General zones.
+**Zone rule:** These content types can only be placed in the Footer zone (or the adjacent Anklet zone). Never use them in Header, Hero, or General zones.
 
-The Footer zone is divided into subsections for legal content: Disclaimer, Disclosure, and Compliance. Each subsection accepts specific content types.
+---
 
-## Footer Subsections
+## Content Types
 
-| Subsection | Content type | Component | Description |
+| Content type | Component | Zone | Order in page |
 |---|---|---|---|
-| Disclaimer | Disclaimer | `Disclaimer` | Static legal text, displayed above disclosures |
-| Disclosure | Disclosure | `Disclosure` | Toggleable legal product information |
-| Compliance | Compliance Block | `ComplianceBlock` | Item numbers and material IDs for compliance tracking |
+| Anklet | `Anklet` | Anklet (own zone, above footer) | 1 — above footer |
+| Links & Social | `LinksAndSocial` | Footer | 2 — first in footer |
+| Disclaimers | `Disclaimer` | Footer | 3 |
+| Disclosures | `Disclosure` | Footer | 4 |
+| Disclosure Toggle Open | `DisclosureToggleOpen` | Footer | 4 (alongside Disclosures) |
+| Compliance | `ComplianceBlock` | Footer | 5 |
+| Legal Links | `LegalLinks` | Footer | 6 — last in footer |
+
+---
+
+## Footer Structure
+
+```
+<Anklet />                        ← own zone; quick-links bar above the footer
+
+<Section zone="footer">
+  <LinksAndSocial … />            ← nav columns + social icons
+  <Disclaimer … />                ← static legal copy (always visible)
+  <Disclosure … />                ← legal toggle, starts collapsed
+  <DisclosureToggleOpen … />      ← legal toggle, starts expanded
+  <ComplianceBlock … />           ← Item Number / Material ID
+  <LegalLinks … />                ← Privacy, Terms, Accessibility, Copyright
+</Section>
+```
+
+---
+
+## Key Distinctions
+
+| Comparison | Use |
+|---|---|
+| Disclaimers vs Disclosures | Disclaimers are always visible; Disclosures toggle open/closed |
+| Disclosures vs Disclosure Toggle Open | Both toggle; Toggle Open starts expanded (for required-visible disclosures) |
+| Compliance vs Disclaimers | Compliance is for structured IDs (Item #, Material ID); Disclaimers are free-text legal statements |
+| Anklet vs Legal Links | Anklet links are product/service navigation; Legal Links are policy/legal destinations |
+
+---
 
 ## Placement Example
 
 ```tsx
-import { Section, Disclaimer, Disclosure, ComplianceBlock } from 'lion-make'
+import {
+  Anklet,
+  Section,
+  LinksAndSocial,
+  Disclaimer,
+  Disclosure,
+  ComplianceBlock,
+  LegalLinks,
+} from 'lion-make'
+
+<Anklet links={ankletLinks} />
 
 <Section zone="footer">
-  <Disclaimer
-    text="Products underwritten by Mutual of Omaha Insurance Company, Omaha, Nebraska."
-    itemNumber="ICC20-TERM"
-  />
+  <LinksAndSocial columns={navColumns} socialLinks={socialLinks} />
+  <Disclaimer text="*Rates may vary based on health history and state of residence." />
   <Disclosure
-    triggerLabel="Important Disclosure"
-    content="This policy has exclusions, limitations, and reductions of benefits..."
-    materialId="M28354"
+    triggerLabel="Term Life Insurance Disclosure"
+    content="Policy Form ICC22L-TERM. Issued by Mutual of Omaha Insurance Company."
+    materialId="L-TERM-0524"
+  />
+  <ComplianceBlock itemNumber="M37594_0524" />
+  <LegalLinks
+    copyrightText="© 2025 Mutual of Omaha Insurance Company"
+    links={legalLinks}
   />
-  <ComplianceBlock itemNumber="ICC20-TERM" materialId="M28354" />
 </Section>
 ```
 
+---
+
 ## Files in This Section
 
+- [anklet.md](./anklet.md)
+- [links-and-social.md](./links-and-social.md)
+- [disclaimers.md](./disclaimers.md)
+- [disclosures.md](./disclosures.md)
+- [disclosure-toggle-open.md](./disclosure-toggle-open.md)
+- [compliance.md](./compliance.md)
+- [legal-links.md](./legal-links.md)
+
+Legacy docs (pre-Mondrian naming — kept for reference):
 - [disclaimer.md](./disclaimer.md)
 - [disclosure.md](./disclosure.md)
 - [compliance-block.md](./compliance-block.md)

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

@@ -0,0 +1,42 @@
+# Accordion Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Collapsible sections for Q&A, FAQs, or nested content. Reduces page length by hiding content until needed. One or multiple sections can be open at a time depending on configuration.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `items` | `AccordionItem[]` | Yes | — | Array of collapsible sections |
+| `allowMultipleOpen` | `boolean` | No | `false` | Allow more than one section open at a time |
+| `className` | `string` | No | — | Additional CSS class |
+
+### AccordionItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | The clickable trigger label |
+| `body` | `string` | Yes | Content revealed when expanded |
+
+## Usage
+
+```tsx
+import { AccordionBlock } from 'lion-make'
+
+<AccordionBlock
+  items={[
+    { heading: 'What is the waiting period?', body: 'Coverage begins on the first of the month after approval.' },
+    { heading: 'Can I cancel anytime?', body: 'Yes. Cancel with 30 days notice and receive a prorated refund.' },
+    { heading: 'Is there a medical exam?', body: 'No medical exam required for plans under $50,000.' },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Trigger: `var(--font-size-base)`, `var(--font-weight-600)`, `var(--color-text)`
+- Divider: `var(--border-width-thin)` solid `var(--color-line)`
+- Body: `var(--font-size-base)`, `var(--line-height-base)`, `var(--color-text)`

package/guidelines/content-types/general/all-blogs-post-block.md

@@ -0,0 +1,52 @@
+# All Blog Posts Block
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+**Platform restriction:** Blog platform only (`data-platform="blog"`).
+
+## Description
+
+Renders a paginated or filtered grid of all blog posts. Used as the primary listing view on the blog index page. Not intended for inline use on product pages — use `RecentBlogPostsBlock` for that.
+
+This component requires a data integration to the blog CMS to function; the stub accepts a static `posts` prop for Figma Make prototyping.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `posts` | `BlogPostItem[]` | Yes | — | Array of blog post data |
+| `postsPerPage` | `number` | No | `12` | Number of posts per page (pagination) |
+| `enableFiltering` | `boolean` | No | `true` | Show category/tag filter UI |
+| `enableSearch` | `boolean` | No | `false` | Show keyword search input |
+| `layout` | `'grid' \| 'list'` | No | `'grid'` | Card display mode |
+| `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 |
+| `tags` | `string[]` | Optional tags array |
+
+## Usage
+
+```tsx
+import { AllBlogsPostBlock } from 'lion-make'
+
+<AllBlogsPostBlock
+  posts={blogPosts}
+  postsPerPage={12}
+  enableFiltering
+  layout="grid"
+/>
+```
+
+## Placement Constraint
+
+This content type is only valid on pages where `data-platform="blog"` is set at the page root. Placing it on a non-blog page is invalid.

package/guidelines/content-types/general/background-color-block.md

@@ -0,0 +1,42 @@
+# Background Color Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Wraps child content in a full-width background color band. Used to visually separate page sections or create contrast. Color must come from the design token palette — no custom hex values.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `color` | `BackgroundColorToken` | Yes | Background color token name |
+| `children` | `ReactNode` | Yes | Content to render inside the band |
+| `className` | `string` | No | Additional CSS class |
+
+### BackgroundColorToken values
+
+| Value | CSS variable | Visual |
+|---|---|---|
+| `white` | `--color-white` | White |
+| `gray-lightest` | `--color-gray-lightest` | Near-white gray |
+| `teal-tint` | `--color-teal-tint` | Very light teal |
+| `sand` | `--color-sand` | Warm off-white |
+| `blue-dark` | `--color-blue-dark` | Dark navy (use light text on top) |
+| `teal` | `--color-teal` | Brand teal (use light text on top) |
+| `brand` | `--color-brand` | Brand blue (use light text on top) |
+
+## Usage
+
+```tsx
+import { BackgroundColorBlock, RTBs } from 'lion-make'
+
+<BackgroundColorBlock color="teal-tint">
+  <RTBs items={[...]} />
+</BackgroundColorBlock>
+```
+
+## Design Tokens
+
+- Padding: `var(--padding-edge)`
+- Background: resolved from `BackgroundColorToken`

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

@@ -0,0 +1,43 @@
+# Basic Content Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+The most versatile general content type. Combines a heading, body copy, optional image, and optional CTA. Image position controls the layout direction.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `heading` | `string` | Yes | — | Section heading |
+| `body` | `string` | Yes | — | Body copy |
+| `imageSrc` | `string` | No | — | Image URL |
+| `imageAlt` | `string` | No | — | Image alt text |
+| `imagePosition` | `'left' \| 'right' \| 'top' \| 'none'` | No | `'top'` | Where the image appears relative to text |
+| `ctaLabel` | `string` | No | — | CTA link text |
+| `ctaHref` | `string` | No | — | CTA destination |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { BasicContentBlock } from 'lion-make'
+
+<BasicContentBlock
+  heading="Why families choose us"
+  body="For over 100 years, we've helped families protect what matters most with affordable, straightforward coverage."
+  imageSrc="/family-outdoors.jpg"
+  imageAlt="Family outdoors"
+  imagePosition="right"
+  ctaLabel="Learn about our history"
+  ctaHref="/about"
+/>
+```
+
+## Design Tokens
+
+- Heading: `var(--h2-font-size)`, `var(--font-weight-700)`
+- Body: `var(--font-size-base)`, `var(--line-height-base)`, `var(--color-text)`
+- Gap between image and text: `var(--Grid-gutter-size)`
+- CTA: `var(--color-link)`, `var(--font-weight-600)`

package/guidelines/content-types/general/body-text-copy-block.md

@@ -0,0 +1,38 @@
+# Body Text Copy Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Long-form prose rendered from RTE output. Use for article-style body copy, editorial content, or policy explanations. Constrained to a readable max-width (72ch).
+
+Distinct from `RichText` in intent: BodyTextCopyBlock is for sustained reading, RichText is for short mixed-content fragments. In practice the rendering is similar — use whichever matches the authoring context.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `html` | `string` | Yes | Sanitized HTML from CMS RTE |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { BodyTextCopyBlock } from 'lion-make'
+
+<BodyTextCopyBlock html="<p>Term life insurance provides coverage for a <strong>specific period</strong>...</p>" />
+```
+
+## Content Rules
+
+- Only pass sanitized HTML from the CMS RTE. Never pass raw user input.
+- Headings within body copy should start at H2 (H1 belongs to the Hero zone).
+- Links inherit `var(--color-link)` and `var(--color-link-hover)` automatically.
+
+## Design Tokens
+
+- Font: `var(--font-family-sans-serif)`
+- Size: `var(--font-size-base)`
+- Line height: `var(--line-height-base)`
+- Color: `var(--color-text)`
+- Max width: `72ch`

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

@@ -0,0 +1,37 @@
+# Content Image Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A standalone image with optional caption. Use for meaningful content images — not decorative ones. Always provide descriptive alt text.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `src` | `string` | Yes | — | Image URL |
+| `alt` | `string` | Yes | — | Alt text (required for accessibility) |
+| `caption` | `string` | No | — | Visible caption below the image |
+| `width` | `'full' \| 'half' \| 'third'` | No | `'full'` | Rendered width relative to container |
+| `alignment` | `'left' \| 'center' \| 'right'` | No | `'left'` | Alignment when width is less than full |
+| `linkHref` | `string` | No | — | Makes the image a link |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ContentImageBlock } from 'lion-make'
+
+<ContentImageBlock
+  src="/coverage-diagram.png"
+  alt="Diagram showing term life coverage periods from 10 to 30 years"
+  caption="Coverage periods available for term life policies."
+  width="full"
+/>
+```
+
+## Design Tokens
+
+- Border radius: `var(--border-radius-base)`
+- Caption: `var(--h6-font-size)`, `var(--color-gray-dark)`

package/guidelines/content-types/general/cross-sell-card-block.md

@@ -0,0 +1,45 @@
+# Cross-Sell Card Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A grid of related product or content cards. Used to drive cross-sell between product lines or surface related coverage options. Max 3 cards per row; renders as a responsive grid.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `cards` | `CrossSellCard[]` | Yes | Array of cards (recommended: 2–4) |
+| `className` | `string` | No | Additional CSS class |
+
+### CrossSellCard
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Card title |
+| `body` | `string` | Yes | Short description |
+| `ctaLabel` | `string` | Yes | Link text |
+| `ctaHref` | `string` | Yes | Link destination |
+| `imageSrc` | `string` | No | Card image URL |
+| `imageAlt` | `string` | No | Image alt text |
+
+## Usage
+
+```tsx
+import { CrossSellCardBlock } from 'lion-make'
+
+<CrossSellCardBlock cards={[
+  { heading: 'Whole Life', body: 'Lifetime coverage with a cash value component.', ctaLabel: 'Explore whole life', ctaHref: '/whole-life', imageSrc: '/img/whole-life.jpg', imageAlt: '' },
+  { heading: 'Medicare Supplement', body: 'Cover gaps in Original Medicare.', ctaLabel: 'Learn more', ctaHref: '/medicare', imageSrc: '/img/medicare.jpg', imageAlt: '' },
+]} />
+```
+
+## Design Tokens
+
+- Card border: `var(--border-width-thin)` solid `var(--color-line)`
+- Card border radius: `var(--border-radius-base)`
+- Heading: `var(--h3-font-size)`, `var(--font-weight-600)`
+- Body: `var(--font-size-base)`, `var(--color-text)`
+- CTA: `var(--color-link)`, `var(--font-weight-600)`
+- Grid gap: `var(--Grid-gutter-size)`

package/guidelines/content-types/general/decorative-list-block.md

@@ -0,0 +1,40 @@
+# Decorative List Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A styled list with decorative markers. Use for feature lists, benefits, or steps. More visually engaging than a plain HTML list.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `items` | `string[]` | Yes | — | List items |
+| `style` | `'checkmark' \| 'bullet' \| 'number' \| 'icon'` | No | `'checkmark'` | Marker style |
+| `heading` | `string` | No | — | Optional section heading above the list |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { DecorativeListBlock } from 'lion-make'
+
+<DecorativeListBlock
+  style="checkmark"
+  heading="What's included"
+  items={[
+    'No medical exam required',
+    'Coverage starts immediately',
+    'Fixed premiums — never increases',
+    'Portable — keeps coverage if you change jobs',
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Marker color: `var(--color-brand)`
+- Marker weight: `var(--font-weight-700)`
+- Item text: `var(--font-size-base)`, `var(--color-text)`
+- Item gap: `var(--padding-small-vertical)`

package/guidelines/content-types/general/email-callout-block.md

@@ -0,0 +1,38 @@
+# Email Call-out Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A compact, highlighted block for capturing a single email address. Lighter-weight than `LeadForm` — use when you only need an email with no other fields. For multi-field capture, use `LeadForm` or `MultiStepLeadForm`.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `heading` | `string` | Yes | — | Block headline |
+| `body` | `string` | No | — | Supporting copy |
+| `placeholder` | `string` | No | `'Enter your email'` | Input placeholder text |
+| `submitLabel` | `string` | No | `'Subscribe'` | Submit button label |
+| `onSubmit` | `(email: string) => void` | No | — | Callback with submitted email |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { EmailCalloutBlock } from 'lion-make'
+
+<EmailCalloutBlock
+  heading="Stay informed"
+  body="Get tips on protecting your family — delivered monthly."
+  placeholder="your@email.com"
+  submitLabel="Subscribe"
+  onSubmit={(email) => subscribeEmail(email)}
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--color-teal-tint)`
+- Border radius: `var(--border-radius-base)`
+- Submit: `var(--color-brand)` background, `var(--color-white)` text

package/guidelines/content-types/general/embedded-video-block.md

@@ -0,0 +1,36 @@
+# Embedded Video Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+Embeds a video (YouTube, Vimeo, or hosted) in a responsive aspect-ratio wrapper. Use for product explainers, testimonials, or educational content.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `src` | `string` | Yes | — | Embed URL (YouTube/Vimeo embed URL, not the watch URL) |
+| `title` | `string` | Yes | — | Accessible title for the iframe |
+| `aspectRatio` | `'16/9' \| '4/3' \| '1/1'` | No | `'16/9'` | Video aspect ratio |
+| `autoplay` | `boolean` | No | `false` | Append autoplay parameter to src |
+| `caption` | `string` | No | — | Optional caption below the video |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { EmbeddedVideoBlock } from 'lion-make'
+
+<EmbeddedVideoBlock
+  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+  title="How term life insurance works"
+  aspectRatio="16/9"
+  caption="A 2-minute overview of term life coverage."
+/>
+```
+
+## Design Tokens
+
+- Border radius: `var(--border-radius-base)`
+- Caption: `var(--h6-font-size)`, `var(--color-gray-dark)`

package/guidelines/content-types/general/full-size-image-with-highlight-box.md

@@ -0,0 +1,52 @@
+# Full Size Image with Highlight Box
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+## Description
+
+A full-width image with an overlaid highlight box positioned in one of the four corners. The highlight box contains a heading, body, and optional CTA. Use for visually impactful section openers that combine photography with a key message.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `imageSrc` | `string` | Yes | — | Full-width background image URL |
+| `imageAlt` | `string` | Yes | — | Image alt text |
+| `highlightBox` | `HighlightBox` | Yes | — | The overlay box content |
+| `highlightBoxPosition` | `'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right'` | No | `'bottom-left'` | Corner where the box appears |
+| `className` | `string` | No | — | Additional CSS class |
+
+### HighlightBox
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Overlay heading |
+| `body` | `string` | Yes | Overlay body text |
+| `ctaLabel` | `string` | No | CTA button label |
+| `ctaHref` | `string` | No | CTA destination |
+
+## Usage
+
+```tsx
+import { FullSizeImageWithHighlightBox } from 'lion-make'
+
+<FullSizeImageWithHighlightBox
+  imageSrc="/family-landscape.jpg"
+  imageAlt="Family hiking together"
+  highlightBoxPosition="bottom-left"
+  highlightBox={{
+    heading: 'Protect what you love most',
+    body: 'Term life coverage from $12/month. No medical exam.',
+    ctaLabel: 'Get a quote',
+    ctaHref: '/quote',
+  }}
+/>
+```
+
+## Design Tokens
+
+- Highlight box background: `var(--color-white)`
+- Highlight box border radius: `var(--border-radius-base)`
+- Highlight box padding: `var(--padding-edge)`
+- Highlight box max-width: `360px`
+- CTA background: `var(--color-brand)`, text: `var(--color-white)`

package/guidelines/content-types/general/horizontal-rule.md

@@ -0,0 +1,35 @@
+# Horizontal Rule
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A horizontal divider line to visually separate content sections. Use sparingly — prefer `SpacingBlock` for vertical rhythm without a visible line.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `style` | `'solid' \| 'dashed' \| 'dotted'` | No | `'solid'` | Line style |
+| `color` | `string` | No | `var(--color-line)` | CSS color value or token |
+| `thickness` | `'thin' \| 'base' \| 'thick'` | No | `'thin'` | Line weight |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { HorizontalRule } from 'lion-make'
+
+<HorizontalRule />
+
+// Thick brand-colored divider
+<HorizontalRule thickness="thick" color="var(--color-brand)" />
+```
+
+## Design Tokens
+
+- thin: `var(--border-width-thin)` (1px)
+- base: `var(--border-width-base)` (2px)
+- thick: `var(--border-width-thick)` (3px)
+- Default color: `var(--color-line)` → `var(--color-gray-light)`
+- Margin: `var(--padding-edge)` top and bottom

package/guidelines/content-types/general/hot-jobs-block.md

@@ -0,0 +1,52 @@
+# Hot Jobs Block
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+**Platform restriction:** Careers platform only (`data-platform="careers"`).
+
+## Description
+
+A curated or dynamically-populated listing of featured open positions. Used on careers landing pages and targeted recruiting pages to surface high-priority roles. Connects to the careers data source at runtime; the stub accepts a static `jobs` prop for prototyping.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `jobs` | `JobItem[]` | Yes | — | Array of job listings |
+| `heading` | `string` | No | `'Featured opportunities'` | Section heading |
+| `subtext` | `string` | No | — | Optional supporting copy |
+| `count` | `number` | No | `6` | Max jobs to display |
+| `ctaLabel` | `string` | No | `'View all jobs'` | Link to full job board |
+| `ctaHref` | `string` | No | — | Full job board URL |
+| `layout` | `'cards' \| 'list'` | No | `'cards'` | Display mode |
+| `className` | `string` | No | — | Additional CSS class |
+
+### JobItem
+
+| Prop | Type | Description |
+|---|---|---|
+| `title` | `string` | Job title |
+| `location` | `string` | City, State or "Remote" |
+| `department` | `string` | Department or team |
+| `type` | `'full-time' \| 'part-time' \| 'contract' \| 'internship'` | Employment type |
+| `postedAt` | `string` | ISO 8601 date posted |
+| `applyHref` | `string` | Link to application page |
+
+## Usage
+
+```tsx
+import { HotJobsBlock } from 'lion-make'
+
+<HotJobsBlock
+  heading="We're hiring"
+  subtext="Join our team and help families find financial peace of mind."
+  jobs={featuredJobs}
+  count={6}
+  ctaLabel="See all open roles"
+  ctaHref="/careers/jobs"
+/>
+```
+
+## Placement Constraint
+
+Only valid on pages where `data-platform="careers"` is set at the page root. Do not use on product or blog pages.