` with one link; the cover is decorative. - Pagination is a `nav` with `aria-current="page"`. ## RTL & i18n Strings come from the provider locale (English, Arabic) and can be overridden with `labels`. Dates and numbers use Latin digits. Layout uses logical classes only. ## Styling Container queries choose the columns (1, 2 or 3), so the block adapts to its parent and not the window. Covers use tokens, no hex. ## Do / Don't - Do give every post a `readingMinutes`, or compute it from the body with `readingTime`. - Do keep `filters` in the URL for shareable views. - Don't pass a partial list and expect server paging: `BlogIndex` pages what it is given. ## Related [`BlogPost`](https://docs.nasaqui.com/components/blog-post), [`Pagination`](https://docs.nasaqui.com/components/pagination), [`SectionHeader`](https://docs.nasaqui.com/components/section-header). ## Lab Story `Components/Layout/Blog Index` and page story `Pages/Public/Blog`. ## Code ### React ```tsx `/blog/${p.slug}`} /> ``` ### shadcn ```tsx `/blog/${p.slug}`} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $posts = [ ['slug' => 'tokens', 'title' => 'Design tokens, one source', 'excerpt' => 'How one token file feeds React, Vue and Blade.', 'category' => 'Design', 'tags' => ['tokens', 'css'], 'date' => '2026-04-02', 'readingMinutes' => 5, 'featured' => true], ['slug' => 'rtl', 'title' => 'Right to left, properly', 'excerpt' => 'Logical properties instead of mirrored copies.', 'category' => 'Engineering', 'tags' => ['rtl', 'css'], 'date' => '2026-03-12', 'readingMinutes' => 7], ['slug' => 'forms', 'title' => 'Forms that explain themselves', 'excerpt' => 'Inline errors, helpful hints, no surprises.', 'category' => 'Product', 'tags' => ['forms'], 'date' => '2026-02-20', 'readingMinutes' => 4], ['slug' => 'motion', 'title' => 'Motion with restraint', 'excerpt' => 'Short, purposeful, and off under reduced motion.', 'category' => 'Design', 'tags' => ['motion'], 'date' => '2026-02-01', 'readingMinutes' => 3], ['slug' => 'tables', 'title' => 'Tables people can read', 'excerpt' => 'Density, alignment and sticky headers.', 'category' => 'Engineering', 'tags' => ['tables', 'css'], 'date' => '2026-01-18', 'readingMinutes' => 6], ]; @endphp ``` ### HTML + Alpine ```html