---
id: 9-6
title: 9-6 Component Styling - Cards & Containers
status: QA Review
date: 2026-09-27
parent: 9
---

## Description

As a user, I want consistent card and container styling, So that content is well-organized and visually appealing. | Class | Color | Hex | |-------|-------|-----| | bg-cream | Off-white/Cream | #F9F7F4 | | text-gold / border-gold | Gold | #D4AF37 | | bg-gold/10 | Gold at 10% opacity | - | | text-navy | Dark Navy Blue | #0A1F44 | | text-charcoal | Charcoal Gray | #2C3E50 | | text-success | Success Green | #27AE60 | | text-danger | Warning Red | #E74C3C |. Full implementation history: docs/stories/story-9.6-component-styling-cards-containers.md

## Acceptance Criteria

- [ ] Background: Off-white/cream
- [ ] Box-shadow: 0 2px 8px rgba(0,0,0,0.1)
- [ ] Border-radius: 8px
- [ ] Padding: 24px
- [ ] Optional gold top/left border
- [ ] For featured/important cards
- [ ] Subtle lift effect
- [ ] Shadow increase
- [ ] Icon with gold accent
- [ ] Large number display
- [ ] Trend indicator
- [ ] Consistent item spacing
- [ ] Clear click targets
- [ ] Max-width: 1200px, centered