Organisms

Complex UI components composed of groups of molecules and atoms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These form distinct sections of an interface and provide the structure for major page components.

Coverages List Organism

Critical Ministry Coverages

Organism Structure

  • Header: Section title and description
  • Card Grid: 9 coverage cards using the CoverageCard React component
  • Call-to-Action: Link to view all available coverages
  • Layout: Responsive grid (1 column mobile, 2 tablet, 3 desktop)
  • Background: White container for contrast with eggshell page background

Composed of: Header + CoverageCard React components + CTA button

Organism Design Principles

Complexity

  • • Composed of molecules and atoms
  • • Can contain other organisms
  • • Represent distinct interface sections
  • • Self-contained functional units

Structure

  • • Clear content hierarchy
  • • Consistent spacing patterns
  • • Responsive layout behavior
  • • Accessible interaction flows

Common Organism Patterns

Header Pattern

Logo
Navigation Navigation Navigation
Secondary
Primary

Logo + Navigation + Actions

Hero Pattern

Hero Headline

Supporting description text that explains the value proposition.

Primary CTA
Secondary

Headline + Description + CTAs

Content Grid Pattern

Section Title

Item Title

Description text

Item Title

Description text

Item Title

Description text

Title + Grid of Items