## Cards

Flexible content containers with multiple variants and layouts.

### Card Default

#### Card Header

This is the card body content. Cards are flexible containers for displaying related information.

HTML

    <div class="card" style="max-width: 350px">
                <div class="card--header">
                    <h4 style="margin: 0">Card Header</h4>
                </div>
                <div class="card--body">
                    <p>
                        This is the card body content. Cards are flexible
                        containers for displaying related information.
                    </p>
                </div>
                <div class="card--footer">
                    <button class="button button--small button--primary">
                        Action
                    </button>
                </div>
            </div>

### Card with Image

#### Image Card

A card with a featured image on top for visual content.

HTML

    <div class="card" style="max-width: 350px; overflow: hidden">
                <img
                    src="https://via.placeholder.com/350x200"
                    alt="Card image"
                    style="width: 100%; height: 200px; object-fit: cover"
                />
                <div class="card--body">
                    <h4 style="margin: 0 0 8px">Image Card</h4>
                    <p style="margin: 0; opacity: 0.8">
                        A card with a featured image on top for visual content.
                    </p>
                </div>
                <div class="card--footer">
                    <button class="button button--small">Learn More</button>
                </div>
            </div>

### Card Hover Effect

Interactive Card

Hover over this card to see the lift effect. Perfect for clickable content.

HTML

    <div
                class="card hover"
                style="
                    max-width: 350px;
                    transition:
                        transform 0.3s,
                        box-shadow 0.3s;
                    cursor: pointer;
                "
            >
                <div class="card--header">Interactive Card</div>
                <div class="card--body">
                    <p>
                        Hover over this card to see the lift effect. Perfect for
                        clickable content.
                    </p>
                </div>
                <div class="card--footer">
                    <span style="opacity: 0.6">Click to explore →</span>
                </div>
            </div>

### Card Grid

#### 📊 Analytics

Track your performance with detailed insights.

#### 🔒 Security

Enterprise-grade security for your data.

#### 🚀 Performance

Lightning-fast load times guaranteed.

HTML

    <div
                style="
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 24px;
                "
            >
                <div class="card">
                    <div class="card--body">
                        <h4 style="margin: 0 0 8px">📊 Analytics</h4>
                        <p style="margin: 0; opacity: 0.8">
                            Track your performance with detailed insights.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card--body">
                        <h4 style="margin: 0 0 8px">🔒 Security</h4>
                        <p style="margin: 0; opacity: 0.8">
                            Enterprise-grade security for your data.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card--body">
                        <h4 style="margin: 0 0 8px">🚀 Performance</h4>
                        <p style="margin: 0; opacity: 0.8">
                            Lightning-fast load times guaranteed.
                        </p>
                    </div>
                </div>
            </div>

### Horizontal Card

#### Horizontal Layout

Image on the side for a different presentation.

HTML

    <div
                class="card"
                style="display: flex; flex-direction: row; max-width: 500px"
            >
                <img
                    src="https://via.placeholder.com/150"
                    alt="Card image"
                    style="width: 150px; object-fit: cover"
                />
                <div style="display: flex; flex-direction: column; flex: 1">
                    <div class="card--body">
                        <h4 style="margin: 0 0 8px">Horizontal Layout</h4>
                        <p style="margin: 0; opacity: 0.8">
                            Image on the side for a different presentation.
                        </p>
                    </div>
                    <div class="card--footer">
                        <button class="button button--small">View</button>
                    </div>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!