# Cards Component

A flexible, reusable card selection component with responsive layouts, validation, image/PDF preview, and dark mode support.

## 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 to view the full image!

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' });