{{-- Example page demonstrating card and slider-card components --}} Card System Examples

💳 Card System Examples

Modern, responsive, and accessible card components for Golden Stone

1. Generic Card Component

Basic cards with image, title, description, and action button.

Usage:

<x-card
    imageUrl="https://example.com/image.jpg"
    imageAlt="Product name"
    title="Card Title"
    description="Card description text"
    href="/product/link"
/>

Example:

2. Card with Custom Slot Content

Cards where you can add custom HTML content using slots.

Usage:

<x-card
    imageUrl="{{ asset('image.jpg') }}"
    imageAlt="Product"
    title="Product Name"
>
    <!-- Custom content here -->
    <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
    </ul>
</x-card>

Example:

  • High quality stone
  • Eco-friendly sourcing
  • Fast delivery
  • Expert installation support

3. Slider Card Component

Interactive image carousel with navigation buttons, dots indicator, and optional auto-play.

Usage:

@php
    $images = [
        ['url' => 'https://picsum.photos/600/400?random=1', 'alt' => 'Image 1'],
        ['url' => 'https://picsum.photos/600/400?random=2', 'alt' => 'Image 2'],
        ['url' => 'https://picsum.photos/600/400?random=3', 'alt' => 'Image 3'],
    ];
@endphp

<x-slider-card
    :images="$images"
    title="Stone Gallery"
/>

Example (Manual Navigation):

@php $images = [ ['url' => 'https://picsum.photos/600/400?random=5', 'alt' => 'Stone Sample 1'], ['url' => 'https://picsum.photos/600/400?random=6', 'alt' => 'Stone Sample 2'], ['url' => 'https://picsum.photos/600/400?random=7', 'alt' => 'Stone Sample 3'], ['url' => 'https://picsum.photos/600/400?random=8', 'alt' => 'Stone Sample 4'], ]; @endphp

Click the arrows or dots to navigate through the gallery. Use arrow keys on desktop or swipe on mobile.

4. Slider Card with Auto-Play

Carousel that automatically rotates through images with optional manual control.

Usage:

<x-slider-card
    :images="$images"
    title="Auto-Playing Gallery"
    :autoplay="true"
    :autoplayDelay="4000"
/>

Example (Auto-Play every 4 seconds):

@php $autoplayImages = [ ['url' => 'https://picsum.photos/600/400?random=9', 'alt' => 'Featured 1'], ['url' => 'https://picsum.photos/600/400?random=10', 'alt' => 'Featured 2'], ['url' => 'https://picsum.photos/600/400?random=11', 'alt' => 'Featured 3'], ['url' => 'https://picsum.photos/600/400?random=12', 'alt' => 'Featured 4'], ]; @endphp

Note: This carousel auto-plays and pauses when you hover over it. You can still manually navigate during playback.

5. Multiple Slider Cards in Grid

Multiple carousels displayed side-by-side, each with independent navigation.

Example:

@php $collection1 = [ 'https://picsum.photos/500/350?random=13', 'https://picsum.photos/500/350?random=14', 'https://picsum.photos/500/350?random=15', ]; $collection2 = [ 'https://picsum.photos/500/350?random=16', 'https://picsum.photos/500/350?random=17', 'https://picsum.photos/500/350?random=18', ]; @endphp

✨ Key Features

🎨 Modern Design

Beautiful styling with shadows, rounded corners, and smooth animations.

📱 Fully Responsive

Perfect on mobile, tablet, and desktop screens with optimized layouts.

⌨️ Keyboard Accessible

Navigate with arrow keys, full keyboard support for all interactions.

👆 Touch Friendly

Swipe support on mobile devices, touch-optimized buttons and controls.

🖼️ Image Optimized

Lazy loading, proper aspect ratios, no layout shift, object-fit cover.

🌙 Dark Mode

Components automatically adapt to dark mode preferences.

🚀 Getting Started

  1. Include the CSS file: <link rel="stylesheet" href="{{ asset('css/cards.css') }}">
  2. Add script stack to layout: @stack('scripts')
  3. Use components in your Blade templates
  4. Customize with CSS variables or additional classes

📖 For complete documentation, see CARD_SYSTEM_GUIDE.md

@stack('scripts')