# Doctor Individual Page — Component Inventory

**Page file:** `html/doctor-individual.html`
**Component files:** `html/doctor-individual-components/` (page-specific) + `html/components/` (shared with homepage and other pages)

Each section of the doctor profile page is delivered as a reusable component. The main page file inlines these components for a complete visual preview; the standalone component files in `html/doctor-individual-components/` are the canonical source the Drupal team should convert to Twig templates.

## 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 ("Home › Doctor › {name}") | `html/doctor-individual-components/01-breadcrumb.html` | Pattern from `blogs-components/01-breadcrumb.html` | New |
| 4 | Hero banner (name + 4 jumplink pills + photo) | `html/doctor-individual-components/02-hero-banner.html` | — (new — bespoke layout for this page) | New |
| 5 | Specializations grid container | `html/doctor-individual-components/03-specializations.html` | — (new) | New |
| 6 | Specialization card (single, repeated ×7) | `html/doctor-individual-components/04-specialization-card.html` | — (new Views row template for `taxonomy_term--speciality`) | New (reusable Views row template) |
| 7 | Qualification + Experience card (used twice) | `html/doctor-individual-components/05-qualification-card.html` | — (new) | New (reusable card pattern) |
| 8 | Booking sidebar (purple, sticky on desktop) | `html/doctor-individual-components/06-booking-sidebar.html` | — (new) | New |
| 9 | Research and Designation (2-col bullet list with dashed separator) | `html/doctor-individual-components/07-research-designation.html` | — (new) | New |
| 10 | Awards carousel (data-slider) | `html/doctor-individual-components/08-awards-carousel.html` | Pattern from `blogs-components/02-hero-banner.html` (data-slider hooks) | New |
| 11 | Award card (single, repeated ×9) | `html/doctor-individual-components/09-award-card.html` | — (new Views row template for `field_awards`) | New (reusable Views row template) |
| 12 | Request a Callback form ("Could not find…" variant) | `html/doctor-individual-components/10-callback-form.html` | Pattern from `blogs-components/10-callback-form.html` (post-fix mobile variant) | New (cross-page reuse) |
| 13 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 14 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## Design tokens used

All tokens are defined in `css/input.css` (`@theme` block). This page introduces no new tokens.

- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `bg-[#f1f1f1]` (card surface), `border-[#EBEAEA]` (Research & Designation dashed separator)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px), `--container-inner` (1380px)
- **Radii:** `rounded-[7px]` (booking form fields, jumplink pills), `rounded-[15px]` (cards, sidebar), `rounded-[28px]` (hero cards), `rounded-full` (specialization icons, carousel arrows)

## JavaScript hooks

All JS interaction on this page uses stable `data-*` attributes. No new JS files required — all handlers live in `js/main.js`.

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-slider` | Awards carousel `<div>` | Generic slider container; same handler as blogs hero / homepage doctor-cards |
| `data-slider-track` | Awards carousel track `<div>` | Scrollable horizontal track |
| `data-slider-prev` | Awards prev `<button>` | Navigate one card-width left |
| `data-slider-next` | Awards next `<button>` | Navigate one card-width right |
| `id="booking"` | Booking sidebar `<form>` | Anchor target for any "Book An Appointment" CTA on the page |
| `id="specializations"` | Section anchor | Hero jumplink target |
| `id="qualification"` | Section anchor | Hero jumplink target (wraps both Qualification + Experience cards) |
| `id="research"` | Section anchor | Hero jumplink target |
| `id="awards"` | Section anchor | Hero jumplink target |
| `data-callback-form` | Callback `<form>` | Lead form submit (stub; Drupal Webform handles post-handoff) |
| `data-menu-toggle` / `data-menu-panel` | Nav hamburger | Mobile nav overlay (shared, `js/main.js`) |
| `data-sticky-action` | Sticky bar | Shared sticky bar |

No framework dependencies. Pure vanilla JS. Selectors are attribute-based, not DOM-traversal-based.

## Dynamic content readiness checklist

| Requirement | How this page meets it |
|-------------|----------------------|
| No fixed specialization count | Specializations grid uses `grid-cols-1 lg:grid-cols-2` — any card count works (last cell empty if odd count) |
| No fixed award count | Awards carousel uses `flex` track with horizontal scroll — any card count works |
| No nth-child styling | No `:nth-child` selectors on cards or list items |
| No text-length dependent heights | Specialization cards use fixed `h-[105.73px]` with internal flex; card heights stable regardless of label length. Award cards use fixed `h-[228px]` with text overflow-hidden |
| Qualification/Experience bullet count | Cards grow vertically with item count — no fixed height; CSS flex column |
| Research items 2-column split | Single `field_research_designation` multivalue can be split via Twig index or via CSS `column-count: 2` on a single `<ul>` |
| Booking sidebar sticky | Pure CSS `lg:sticky lg:top-[100px]` — no JS, no scroll listener |
| Hero jumplinks | Native HTML anchors, smooth-scroll via CSS `scroll-behavior: smooth` (already global) |
| Semantic HTML5 | `<section>`, `<article>`, `<aside>`, `<nav>`, `<main>`, `<h1>`/`<h2>` hierarchy maintained |
| Alt placeholders on all images | Specialization icons have `alt=""` (decorative — name is in adjacent `<span>`); doctor photo has `alt="{name}"` |
| Form labels | All booking sidebar inputs have `<label>` wrappers with visible label text; consent checkbox has descriptive `<span>` |
| Keyboard focus | `focus:outline-none focus:ring-2 focus:ring-accent` on all booking inputs; arrows have native focus ring |
| Sticky sidebar boundary | Sidebar is contained inside the 2-col wrapper; sticky stops naturally at the wrapper boundary (Research & Designation is full-width and outside) |