Z

HealthArticlesSection

A health resources and articles grid organism with search and category filtering. Perfect for displaying educational content, prevention guides, and health news.

Basic Articles Grid

Health Resources

Educational content to help you stay informed and healthy

Articles with Featured Images

Featured Articles

Empty State

Search Results

Usage Example

<x-interface-frameworks.health-articles-section
    title="Health Resources"
    description="Educational content"
    :articles="[
        [
            'title' => 'Article Title',
            'excerpt' => 'Brief description...',
            'category' => 'Prevention',
            'readTime' => 5,
            'date' => 'Nov 20, 2024',
            'author' => 'Author Name',
            'image' => '/path/to/image.jpg',
        ],
    ]"
    :showSearch="true"
    :showCategories="true"
    :columns="3"
/>

Props

Prop Type Default Description
title string 'Health Resources' Section title
description string '' Section description
articles array [] Array of article objects
showSearch boolean true Show search input
showCategories boolean true Show category filters
columns number 3 Grid columns (1-4)
emptyMessage string 'No articles...' Empty state message

Article Data Structure

[
    'title' => 'Article Title',      // Required: Article headline
    'excerpt' => 'Brief summary...', // Required: Short description
    'category' => 'Prevention',      // Optional: Category for filtering
    'readTime' => 5,                 // Optional: Minutes to read
    'date' => 'Nov 20, 2024',        // Optional: Publication date
    'author' => 'Dr. Jane Doe',      // Optional: Author name
    'image' => '/path/to/image.jpg', // Optional: Featured image URL
]

Accessibility Features

  • Semantic article elements with proper headings
  • Keyboard navigable card grid
  • Image alt text from article titles
  • Focus visible states on interactive elements
  • Screen reader friendly filter buttons
  • Responsive grid maintains reading order