Interface Frameworks

Organisms are complex UI components composed of Building Blocks (atoms) and Narrative Sections (molecules). They represent distinct sections of an interface and form the structure of page templates.

Core Layout Organisms

These organisms form the structural foundation of the application, providing consistent navigation and layout.

AppHeader

Site header with logo, navigation links, CTA button, and responsive mobile menu.

Responsive Alpine.js

AppFooter

Site footer with brand, tagline, navigation links, and copyright information.

Responsive Slots

DocsSidebar

Collapsible sidebar navigation with sections, active state tracking, and icons.

Collapsible Alpine.js

AppShell

Complete application shell with header, sidebar, main content, and footer slots.

Layout Slots

DS Documentation Organisms

These organisms enhance the design system documentation site itself.

FoundationsHero

Hero section for foundations pages with title, description, icon, and statistics.

Stats Icon

ComponentShowLayout

Standard layout for component documentation pages with breadcrumbs and sidebar.

Layout Sidebar

ComponentGallery

Filterable component grid with search, category filters, and status filters.

Search Alpine.js

Product Organisms

Product-specific organisms for the Zika Alert application's user-facing features.

SettingsSection

Grouped settings panel with collapsible sections for user preferences.

Collapsible Alpine.js

FeedbackSection

User feedback form with category selection and submission handling.

Form Alpine.js

LegalBody

Legal Print

OnboardingSection

Step-based onboarding flow with progress indicators and action buttons.

Progress Steps

MapPanel

Interactive map panel with location markers, risk levels, and legend.

Map Alpine.js

AlertsSection

Health alerts list with filtering, search, and severity indicators.

Filters Alpine.js

HealthArticlesSection

Health resources grid with search, category filters, and article cards.

Grid Search