2.3 KiB

Raw Blame History

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

<!-- 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

2.3 KiB Raw Blame History