# Blog Individual Page — Component Inventory

**Page file:** `html/blog-individual.html`
**Component files:** `html/blog-individual-components/` (page-specific) + `html/components/` (shared)

Each section is a reusable component. The main page file inlines these for a complete preview; the standalone files in `html/blog-individual-components/` are the canonical source for Drupal Twig conversion.

## Components used on this page

| # | Section | Component file | Reused from | Type |
|---|---------|----------------|-------------|------|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Homepage (verbatim) | Shared |
| 2 | Main navigation | `html/components/02-main-nav.html` | Homepage (verbatim) | Shared |
| 3 | Breadcrumb (white-on-dark, inside hero) | `html/blog-individual-components/01-breadcrumb.html` | New | New |
| 4 | Hero (full-bleed image + meta) | `html/blog-individual-components/02-hero-banner.html` | New (bespoke) | New |
| 5 | Blog Summary card | `html/blog-individual-components/03-blog-summary.html` | New | New |
| 6 | TOC sidebar widget (sticky) | `html/blog-individual-components/04-toc-sidebar.html` | New | New |
| 7 | Reusable section-text (heading + body) | `html/blog-individual-components/05-section-text.html` | New | New (used many times) |
| 8 | Comparison cards (Antibiotic vs Lubricating) | `html/blog-individual-components/06-comparison-cards.html` | New | New |
| 9 | Tab-swap section (heading + chips + panels) | `html/blog-individual-components/07-tab-swap-section.html` | Pattern from `centre-individual-components/04-specialities-tabs.html` (now generalized to `[data-tab-swap]`) | New (used 3× — Types/Uses/Side Effects) |
| 10 | Stepper card | `html/blog-individual-components/08-stepper.html` | New | New |
| 11 | Do's and Don'ts row | `html/blog-individual-components/09-dos-donts.html` | New | New |
| 12 | Conclusion card | `html/blog-individual-components/10-conclusion.html` | New | New |
| 13 | FAQ accordion (6 items) | `html/blog-individual-components/11-faq.html` | Pattern from `centre-individual-components/10-faq.html` (native details/summary) | New |
| 14 | Readers Favorite sidebar widget | `html/blog-individual-components/12-readers-favorite.html` | New | New |
| 15 | Related Blogs row (full-width) | `html/blog-individual-components/13-related-blogs.html` | New | New |
| 16 | Floating actions (scroll-up + share) | `html/blog-individual-components/14-floating-actions.html` | New | New |
| 17 | Callback form ("Could not find…") | `html/blog-individual-components/15-callback-form.html` | Cross-page copy of `blogs-components/10-callback-form.html` | New (cross-page reuse) |
| 18 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 19 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## Design tokens used

This page introduces no new tokens.

- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `bg-[#f1f1f1]` (cards), `bg-[#f4f4f8]` (stepper card), `text-[#fafafa]` (breadcrumb on dark hero), `border-[#d9d9d9]` (stepper line)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px)
- **Radii:** `rounded-[5px]` (FAQ items), `rounded-[7px]` (sidebar mini-card thumbnails), `rounded-[13px]` (chips), `rounded-[15px]` (cards), `rounded-full` (stepper dots, floating action buttons)

## JavaScript hooks

The tab-swap handler in `js/main.js` is shared with centre-individual (generalized to `[data-tab-swap]`). FAQ uses native `<details>`/`<summary>` (zero JS). Floating actions use inline `onclick`.

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-tab-swap` | Each of 3 tab containers (Types/Uses/Side Effects) | Marks the tab + panel scope for the swap handler |
| `data-tab` + `data-target` | Each chip `<button>` | Click → toggles `data-active="true"` and shows matching panel |
| `data-tab-panel` + `data-target` | Each panel `<div>` | Hidden by default except active; JS toggles `hidden` class |
| `data-active` | Each chip | `"true"` for active, `"false"` for others; styled via Tailwind `data-[active=true]:*` |
| Inline `onclick` on scroll-up button | `<button>` in floating actions | `window.scrollTo({top:0, behavior:'smooth'})` |
| Inline `onclick` on share button | `<button>` in floating actions | `navigator.share?.()` with `clipboard.writeText` fallback |
| `data-callback-form` | Bottom callback `<form>` | Lead form submit (stub; Drupal Webform takes over) |
| `data-menu-toggle` / `data-menu-panel` | Nav hamburger | Mobile nav overlay (shared) |
| `data-sticky-action` | Sticky bar | Shared sticky bar |

No framework dependencies. Pure vanilla JS.

## Dynamic content readiness checklist

| Requirement | How this page meets it |
|-------------|----------------------|
| No fixed section count | Article body sections are independent partials in DOM order — Drupal can add/remove via `field_body` paragraph reference |
| No fixed chip count per tab group | Tab strip uses `grid grid-cols-2 lg:grid-cols-N` with N matching chip count |
| No fixed FAQ count | FAQ list uses `space-y-3` flex column — any count works |
| No fixed Readers Favorite / Related blog count | Both widgets use grid/flex with no count assumption |
| No nth-child styling | No `:nth-child` selectors anywhere |
| TOC anchors | Native `<a href="#section-id">`; section IDs match ToC link targets |
| Sticky TOC | Pure CSS `lg:sticky lg:top-[100px]`; stops at sidebar bottom |
| Side Effects panel content fits varying length | Single-column body in panel; `text-justify` handles wrapping |
| Stepper count | Static 5-step demo; Drupal-driven steppers can have any N |