Molecules

Simple groups of UI elements functioning together as a unit

Molecules are relatively simple groups of UI elements functioning together as a unit. They are composed of atoms and serve as the backbone of our design system, providing reusable components that can be combined to form more complex structures.

Coverage Card Molecule

Example Implementation

Liability Coverage

Comprehensive protection for your ministry against third-party claims and lawsuits.

Variations

Auto Insurance

Vehicle coverage for ministry transportation and fleet management.

Workers Comp

Protection for ministry staff and volunteers in case of workplace injuries.

Benefits

Comprehensive health and welfare benefits for ministry employees.

Component Structure

<CoverageCard
  title="Coverage Title"
  description="Description text"
  href="/coverages/[slug]"
  icon="shield"
/>

Clickable React component | Poppins font headers | Thicker borders | Blue hover state with white text/icons

Molecule Design Principles

Composition

  • • Built from atoms (colors, typography, spacing)
  • • Single responsibility principle
  • • Reusable across different contexts
  • • Self-contained functionality

Guidelines

  • • Consistent spacing and alignment
  • • Accessible interaction patterns
  • • Responsive design considerations
  • • Clear state variations