93 lines
2.3 KiB
Markdown
93 lines
2.3 KiB
Markdown
# 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
|