# Story 9.6: Component Styling - Cards & Containers

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **consistent card and container styling**,
So that **content is well-organized and visually appealing**.

## Acceptance Criteria

### Card Styling
- [ ] Background: Off-white/cream
- [ ] Box-shadow: 0 2px 8px rgba(0,0,0,0.1)
- [ ] Border-radius: 8px
- [ ] Padding: 24px

### Gold Border Highlight
- [ ] Optional gold top/left border
- [ ] For featured/important cards

### Hover States
- [ ] Subtle lift effect
- [ ] Shadow increase

### Dashboard Stat Cards
- [ ] Icon with gold accent
- [ ] Large number display
- [ ] Trend indicator

### List Cards
- [ ] Consistent item spacing
- [ ] Clear click targets

### Containers
- [ ] Max-width: 1200px, centered

## Technical Notes

```blade
<!-- resources/views/components/card.blade.php -->
@props([
    'variant' => 'default',
    'hover' => false,
    'highlight' => false
])

<div {{ $attributes->merge([
    'class' => collect([
        'bg-cream rounded-lg p-6',
        'shadow-sm' => $variant === 'default',
        'shadow-md' => $variant === 'elevated',
        'hover:shadow-md hover:-translate-y-0.5 transition-all cursor-pointer' => $hover,
        'border-s-4 border-gold' => $highlight,
    ])->filter()->implode(' ')
]) }}>
    {{ $slot }}
</div>

<!-- Stat card component -->
@props(['icon', 'value', 'label', 'trend' => null])

<x-card>
    <div class="flex items-center gap-4">
        <div class="p-3 bg-gold/10 rounded-lg">
            <flux:icon :name="$icon" class="w-6 h-6 text-gold" />
        </div>
        <div>
            <div class="text-2xl font-bold text-navy">{{ $value }}</div>
            <div class="text-sm text-charcoal/70">{{ $label }}</div>
            @if($trend)
                <div class="text-xs {{ $trend > 0 ? 'text-success' : 'text-danger' }}">
                    {{ $trend > 0 ? '+' : '' }}{{ $trend }}%
                </div>
            @endif
        </div>
    </div>
</x-card>
```

## Definition of Done
- [ ] Card component created
- [ ] Shadow and radius consistent
- [ ] Hover effects work
- [ ] Stat cards work
- [ ] Highlight variant works
- [ ] Container max-width applied
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 3 hours