Card Components
Cards are containers that group related content and actions.
🎴 Card Types
Basic Card
Simple container with padding and border/shadow.
Content Card
Card with header, body, and optional footer.
Service Card
Displays lawn care services with image, title, description, and CTA.
Pricing Card
Shows pricing plans and features.
Testimonial Card
Customer reviews and feedback.
Stats Card
Highlights key metrics and numbers.
📋 Usage Guidelines
- Use cards to group related information
- Maintain consistent padding and spacing
- Cards should be tappable/clickable if they contain actions
- Use elevation (shadows) to indicate hierarchy
- Ensure sufficient contrast for readability
🔄 Auto-generated Section
Note: To add detailed specifications:
- Export card components from Figma
- Run
npm run docs:update-cards- Full documentation will be generated
Related: