Card

Cards are used to group and display content in a way that is easily readable. Supports images, actions, and multiple layout variants.

Basic Usage

Card with image, title, and action button. 

await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { tags, $ } = Lightview;
const { p, Card, Button } = tags;

const card = Card({ style: 'width: 18rem;' },
    Card.Figure({ 
        src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
        alt: 'Shoes'
    }),
    Card.Body({},
        Card.Title({}, 'Nike Air Max'),
        p({}, 'Premium comfort meets modern style.'),
        Card.Actions({ justify: 'end' },
            Button({ color: 'primary' }, 'Buy Now')
        )
    )
);

$('#example').content(card);
await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Card, Button, p } = tags;

const card = {
    tag: Card,
    attributes: { style: 'width: 18rem;' },
    children: [
        {
            tag: Card.Figure,
            attributes: { 
                src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
                alt: 'Shoes'
            }
        },
        {
            tag: Card.Body,
            children: [
                { tag: Card.Title, children: ['Nike Air Max'] },
                { tag: p, children: ['Premium comfort meets modern style.'] },
                {
                    tag: Card.Actions,
                    attributes: { justify: 'end' },
                    children: [
                        { tag: Button, attributes: { color: 'primary' }, children: ['Buy Now'] }
                    ]
                }
            ]
        }
    ]
};

$('#example').content(card);
await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

const card = {
    Card: {
        style: 'width: 18rem;',
        children: [
            {
                'Card.Figure': { 
                    src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
                    alt: 'Shoes'
                }
            },
            {
                'Card.Body': {
                    children: [
                        { 'Card.Title': { children: ['Nike Air Max'] } },
                        { p: { children: ['Premium comfort meets modern style.'] } },
                        {
                            'Card.Actions': {
                                justify: 'end',
                                children: [
                                    { Button: { color: 'primary', children: ['Buy Now'] } }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(card);

Product Card with Cart

Interactive card with add to cart functionality.

await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, tags, $ } = Lightview;
const { p, span, div, Card, Button, Badge } = tags;

const inCart = signal(false);

const card = Card({ style: 'width: 18rem;' },
    Card.Figure({ 
        src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
        alt: 'Watch'
    }),
    Card.Body({},
        div({ style: 'display: flex; justify-content: space-between; align-items: start;' },
            Card.Title({}, 'Smart Watch'),
            Badge({ color: 'success' }, 'New')
        ),
        p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Track your fitness goals with precision.'),
        div({ style: 'font-size: 1.25rem; font-weight: 700;' }, '$299'),
        Card.Actions({ justify: 'end' },
            () => inCart.value
                ? Button({ color: 'success', onclick: () => { inCart.value = false; } }, '✓ In Cart')
                : Button({ color: 'primary', onclick: () => { inCart.value = true; } }, 'Add to Cart')
        )
    )
);

$('#example').content(card);
await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, $, tags } = Lightview;
const { Card, Button, Badge, div, p } = tags;

const inCart = signal(false);

const card = {
    tag: Card,
    attributes: { style: 'width: 18rem;' },
    children: [
        {
            tag: Card.Figure,
            attributes: { 
                src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
                alt: 'Watch'
            }
        },
        {
            tag: Card.Body,
            children: [
                {
                    tag: div,
                    attributes: { style: 'display: flex; justify-content: space-between; align-items: start;' },
                    children: [
                        { tag: Card.Title, children: ['Smart Watch'] },
                        { tag: Badge, attributes: { color: 'success' }, children: ['New'] }
                    ]
                },
                { tag: p, attributes: { style: 'font-size: 0.875rem; opacity: 0.7;' }, children: ['Track your fitness goals with precision.'] },
                { tag: div, attributes: { style: 'font-size: 1.25rem; font-weight: 700;' }, children: ['$299'] },
                {
                    tag: Card.Actions,
                    attributes: { justify: 'end' },
                    children: [
                        () => inCart.value
                            ? { tag: Button, attributes: { color: 'success', onclick: () => { inCart.value = false; } }, children: ['✓ In Cart'] }
                            : { tag: Button, attributes: { color: 'primary', onclick: () => { inCart.value = true; } }, children: ['Add to Cart'] }
                    ]
                }
            ]
        }
    ]
};

$('#example').content(card);
await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, $ } = Lightview;

const inCart = signal(false);

const card = {
    Card: {
        style: 'width: 18rem;',
        children: [
            {
                'Card.Figure': { 
                    src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
                    alt: 'Watch'
                }
            },
            {
                'Card.Body': {
                    children: [
                        {
                            div: {
                                style: 'display: flex; justify-content: space-between; align-items: start;',
                                children: [
                                    { 'Card.Title': { children: ['Smart Watch'] } },
                                    { Badge: { color: 'success', children: ['New'] } }
                                ]
                            }
                        },
                        { p: { style: 'font-size: 0.875rem; opacity: 0.7;', children: ['Track your fitness goals with precision.'] } },
                        { div: { style: 'font-size: 1.25rem; font-weight: 700;', children: ['$299'] } },
                        {
                            'Card.Actions': {
                                justify: 'end',
                                children: [
                                    () => inCart.value
                                        ? { Button: { color: 'success', onclick: () => { inCart.value = false; }, children: ['✓ In Cart'] } }
                                        : { Button: { color: 'primary', onclick: () => { inCart.value = true; }, children: ['Add to Cart'] } }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(card);

Props

Prop Type Default Description
variant string - 'bordered' | 'dash' | 'side' | 'compact'
imageFull boolean false Image fills the entire card width with overlay text
bg string 'bg-base-100' Background color class
shadow string 'shadow-sm' Shadow class (shadow-sm, shadow-md, shadow-xl)

Sub-components

Component Description
Card.Body Content container with padding
Card.Title Card heading (h2)
Card.Actions Container for action buttons (props: justify)
Card.Figure Image container (props: src, alt)

Variants

Bordered

Card with a border instead of shadow.

Dash

Card with a dashed border.

Side Layout

Album

Horizontal Card

Image on the side with content next to it.

Compact

Shoes

Compact Card

Less padding for a tighter layout.

Image Overlay

Shoes

Text Over Image

Content overlay on top of the image.