Card

The Card component is a flexible container that groups related content and actions. It supports various visual styles, interactive states, and can be used to create consistent layouts throughout your application.

Import

import { Card } from 'rebel-ui';

Usage

Basic Card

<Card padding="md">
    <h3>Basic Card</h3>
    <p>This is a basic card with default styling.</p>
</Card>

Card Variants

The Card component comes with four distinct variants: default, elevated, outlined, and glass.

<!-- Default Card -->
<Card variant="default" padding="md">
    <h3>Default</h3>
    <p>Standard card with subtle border and shadow.</p>
</Card>

<!-- Elevated Card -->
<Card variant="elevated" padding="md">
    <h3>Elevated</h3>
    <p>Card with pronounced elevation.</p>
</Card>

<!-- Outlined Card -->
<Card variant="outlined" padding="md">
    <h3>Outlined</h3>
    <p>Border-focused with animated accent.</p>
</Card>

<!-- Glass Card with animated background -->
<div class="glass-card-wrapper">
    <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
    </div>
    <Card variant="glass" padding="md">
        <h3>Glass</h3>
        <p>Modern glassmorphism effect with backdrop blur.</p>
        <Button variant="link" label="Learn More" />
    </Card>
</div>

<style>
    .glass-card-wrapper {
        position: relative;
        border-radius: var(--rebel-radius-xl);
        overflow: hidden;
        background: linear-gradient(
            45deg,
            var(--rebel-brand) 0%,
            var(--rebel-accent) 100%
        );
        padding: 0;
        min-height: 200px;
    }

    .floating-shapes {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .shape {
        position: absolute;
        border-radius: 50%;
        animation: float 8s infinite;
        opacity: 0.6;
    }

    .shape-1 {
        width: 150px;
        height: 150px;
        background: var(--rebel-accent);
        top: 20%;
        left: 10%;
        animation-delay: 0s;
    }

    .shape-2 {
        width: 100px;
        height: 100px;
        background: var(--rebel-brand);
        top: 60%;
        right: 15%;
        animation-delay: -2s;
    }

    .shape-3 {
        width: 75px;
        height: 75px;
        background: var(--rebel-secondary);
        bottom: 20%;
        left: 20%;
        animation-delay: -4s;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(-20px) translateX(10px); }
        50% { transform: translateY(0) translateX(20px); }
        75% { transform: translateY(20px) translateX(10px); }
    }
</style>

Padding Sizes

Cards support four padding sizes: none, sm, md, and lg.

<Card padding="none">Content</Card>
<Card padding="sm">Content</Card>
<Card padding="md">Content</Card>
<Card padding="lg">Content</Card>

Interactive Cards

Cards can be made interactive with the hoverable and clickable props.

<Card hoverable>
    <h3>Hoverable Card</h3>
    <p>This card has hover effects.</p>
</Card>

<Card hoverable clickable>
    <h3>Clickable Card</h3>
    <p>This card is both hoverable and clickable.</p>
</Card>

Card with Link

Cards can act as links when provided with an href prop.

<Card
    variant="elevated"
    padding="md"
    hoverable
    href="https://example.com"
    target="_blank"
>
    <h3>Linked Card</h3>
    <p>Click to visit external link</p>
</Card>

Complex Example

Cards can contain various components and layouts.

<Card variant="elevated" padding="lg" hoverable>
    <h3>Login</h3>
    <div class="form-stack">
        <Input
            label="Email"
            type="email"
            placeholder="Enter your email"
            bind:value={email}
        />
        <Button variant="primary" label="Sign In" />
    </div>
</Card>

Props

Prop	Type	Default	Description
variant	'default' \| 'elevated' \| 'outlined' \| 'glass'	'default'	Visual style variant of the card
padding	'none' \| 'sm' \| 'md' \| 'lg'	'md'	Amount of padding inside the card
hoverable	boolean	false	Enables hover effects
clickable	boolean	false	Makes the card clickable and adds active state
href	string	undefined	Makes the card a link to the specified URL
target	'_self' \| '_blank'	'_self'	Target attribute for link cards
containsButtons	boolean	false	Optimizes card for containing button elements

Styling

The Card component uses CSS variables for theming:

.card {
    --rebel-surface: /* Card background color */
    --rebel-radius-xl: /* Border radius */
    --rebel-text-primary: /* Text color */
    --rebel-border: /* Border color */
    --rebel-shadow-sm: /* Small shadow */
    --rebel-shadow-md: /* Medium shadow */
    --rebel-shadow-lg: /* Large shadow */
    --rebel-shadow-xl: /* Extra large shadow */
    --rebel-glass-bg: /* Glass effect background */
    --rebel-glass-border: /* Glass effect border */
    --rebel-brand: /* Primary brand color */
    --rebel-accent: /* Accent color */
    --rebel-secondary: /* Secondary color */
}