Cards Component - Examples

Single Selection (Required)

Choose one option. This example demonstrates required validation - try clicking the validate button without selecting anything.

No selection made

const singleSelect = new Cards({
    containerId: 'single-select-container',
    cards: [
        { title: 'Basic Plan', content: '$10/month', value: 'basic' },
        { title: 'Pro Plan', content: '$25/month', value: 'pro' },
        { title: 'Enterprise', content: '$50/month', value: 'enterprise' }
    ],
    multiSelect: false,
    required: true,
    onChange: (selection) => {
        console.log('Selected:', selection);
    }
});

Multi-Selection with Images

Select multiple technologies. This example shows image support and multi-select mode. Hover over images to see the expand button for full-screen preview!

No selections made

const multiSelect = new Cards({
    containerId: 'multi-select-container',
    cards: [
        { title: 'JavaScript', content: 'Modern web development', value: 'js' },
        { title: 'Python', content: 'Data science and backend', value: 'python' },
        { title: 'React', content: 'Frontend framework', value: 'react' },
        { title: 'Node.js', content: 'Server-side JavaScript', value: 'node' },
        { title: 'TypeScript', content: 'Typed JavaScript', value: 'ts' },
        { title: 'Vue.js', content: 'Progressive framework', value: 'vue' }
    ],
    multiSelect: true,
    required: false,
    gridLayout: '3x2'
});

Centered Layout (2 Cards)

When you have fewer cards, they automatically center in the container.

No selection made

const centeredCards = new Cards({
    containerId: 'centered-container',
    cards: [
        { title: 'Light Mode', content: 'Classic bright interface', value: 'light' },
        { title: 'Dark Mode', content: 'Easy on the eyes', value: 'dark' }
    ],
    multiSelect: false,
    required: false,
    gridLayout: 'center-2'
});