# Blogs Page — Component Inventory

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

Each section of the blogs 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/blogs-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 › Blogs") | `html/blogs-components/01-breadcrumb.html` | Pattern from `specialities-components/01-breadcrumb.html` | New |
| 4 | Hero / featured-post slider ("Dark Circles Under Eyes…") | `html/blogs-components/02-hero-banner.html` | Pattern from homepage doctor-cards slider (data-slider hooks) | New |
| 5 | Search filter (text + month + year + Need Help pill) | `html/blogs-components/03-search-filter.html` | Pattern from `eye-specialists-components/03-search-filter.html` (adapted: 3 filters, no submit button) | New |
| 6 | Category filter (12 chips) | `html/blogs-components/04-category-filter.html` | Pattern from `specialities-components/03-category-filter.html` | New |
| 7 | Blog card (single card, repeated ×10 in main grid) | `html/blogs-components/05-blog-card.html` | — (new Views row template for `node--blog`) | New (reusable Views row template) |
| 8 | Sidebar list widget (Reader's Favourite + Hindi Blogs) | `html/blogs-components/06-sidebar-list.html` | — (new compact teaser-thumb widget) | New |
| 9 | Pagination | `html/blogs-components/07-pagination.html` | Pattern from `eye-specialists-components/05-load-more.html` (pagination variant) | New |
| 10 | Our Story and Vision | `html/blogs-components/08-our-story.html` | Pattern from `specialities-components/05-our-story.html` | New |
| 11 | Why Choose Centre For Sight? (4 feature cards) | `html/blogs-components/09-why-cfs.html` | Pattern from `specialities-components/09-why-cfs.html` | New |
| 12 | Request a Callback form ("Could not find…" variant) | `html/blogs-components/10-callback-form.html` | Pattern from `specialities-components/11-callback-form.html` (post-fix variant) | New |
| 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), `gray-100` (#F1F1F1), `text-dark` / `text-[#434343]` (#434343)
- **Custom colors (inline):** `#1a1a1a` (card key-takeaways text), `#f7f7f7` (`+91` prefix bg in callback form)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px), `--container-inner` (1380px)
- **Radii:** `rounded-[3px]`, `rounded-[5px]`, `rounded-[6px]`, `rounded-[7px]`, `rounded-[10px]`, `rounded-[11px]`, `rounded-[14px]`, `rounded-[17px]`, `rounded-full`

## 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="featured-blog"` | Hero `<section>` | Slider container; same generic slider handler as doctor-cards |
| `data-slider-prev` | Hero prev `<button>` | Navigate to previous featured post |
| `data-slider-next` | Hero next `<button>` | Navigate to next featured post |
| `data-blog-search-form` | Search `<form>` | Filter form wrapper |
| `data-blog-search` | Text `<input>` | Exposed filter on blog `title`/`body` (contains) |
| `data-blog-month` | Month `<select>` | Exposed filter on `field_published_date` month |
| `data-blog-year` | Year `<select>` | Exposed filter on `field_published_date` year |
| `data-category-filter` | Category `<ul>` | Filter list container hook |
| `data-category-chip` + `data-category` | Each chip `<a>` | Category filter link; active state set by Drupal Twig |
| `data-blog-card` + `data-category` | Each card `<a>` | Card-level hook reserved for Drupal Views |
| `data-sidebar-list-item` | Each sidebar `<a>` | Sidebar widget item hook |
| `data-page-link` + `data-page` | Each pagination `<a>` | Pager link; `data-active="true"` on current page |
| `data-why-cfs-card` | Each Why CFS `<li>` | Hover state hook (CSS transitions; no JS) |
| `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 card count | Blog grid uses `grid grid-cols-1 sm:grid-cols-2` inside a flex main column — any card count works |
| No nth-child styling | No `:nth-child` selectors on blog cards, sidebar items, or any grid |
| No text-length dependent heights | Blog card uses `flex flex-col` with `mt-auto` on meta row; title/snippet lengths do not affect card height |
| Repeatable card structure | `05-blog-card.html` is a single self-contained unit |
| Repeatable sidebar item structure | `06-sidebar-list.html` item is a single self-contained unit; widget heading is a field |
| Category filter is server-driven | Chips link to `?category=<slug>` — Drupal Views Exposed Filter resolves actual filtering |
| Pagination is server-driven | Drupal Views pager computes real page count; static "12" is layout demo only |
| Semantic HTML5 | `<section>`, `<article>`, `<aside>`, `<nav>`, `<main>`, `<h1>`–`<h3>` hierarchy maintained |
| Alt placeholders on all images | Every `<img>` has descriptive `alt=""` attribute |
| Form labels | `<label>` + `sr-only` on callback form inputs; `sr-only` `<span>` on search filter inputs |
| Keyboard focus | `focus-visible:outline` utilities on all interactive elements (chips, buttons, links, inputs) |
| Sidebar widget count | Each sidebar widget is an independent `<aside>` — adding/removing widgets does not break layout |