Card

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

Basic Example

Card with image, title, and action button


const { default: Card } = await import('/components/data-display/card.js');
const { default: Button } = await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { p } = tags;

const card = Card({ class: 'w-72' },
    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')
        )
    )
);

$('#demo').insert(card);

Product Card with Cart

Interactive card with add to cart functionality


const { default: Card } = await import('/components/data-display/card.js');
const { default: Button } = await import('/components/actions/button.js');
const { default: Badge } = await import('/components/data-display/badge.js');

const { signal, tags, $ } = Lightview;
const { p, span, div } = tags;

const inCart = signal(false);

const card = Card({ class: 'w-72' },
    Card.Figure({ 
        src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
        alt: 'Watch'
    }),
    Card.Body({},
        div({ class: 'flex justify-between items-start' },
            Card.Title({}, 'Smart Watch'),
            Badge({ color: 'success' }, 'New')
        ),
        p({ class: 'text-sm opacity-70' }, 'Track your fitness goals with precision.'),
        div({ class: 'text-xl font-bold' }, '$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')
        )
    )
);

$('#demo').insert(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)