Card

Cards are flexible content containers that display information in a structured, visually appealing format. They're one of the most versatile UI components, perfect for showcasing products, articles, user profiles, or any grouped content.

Key Features

• Flexible content structure with optional header, body, and footer
• Hover effects with lift animation and shadow enhancement
• Clickable cards that act as interactive links
• Theme-aware styling with automatic light/dark mode support
• Customisable shadows, borders, and spacing

When to Use Cards

• Content Collections: Blog posts, products, team members, portfolio items
• Dashboards: Statistics widgets, activity feeds, metric displays
• Navigation: Feature highlights, service offerings, call-to-action blocks
• Forms: Multi-step wizards, settings panels, grouped inputs

Basic Usage

// Option 1: Enhance existing HTML
<div id="my-card" class="card">
    <div class="card-header">Card Header</div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Card content goes here.</p>
    </div>
    <div class="card-footer">Card Footer</div>
</div>

const card = Domma.elements.card('#my-card', {
    hover: true,
    clickable: false
});

// Option 2: Generate HTML from options (NEW!)
const generatedCard = Domma.elements.card('#container', {
    title: 'Card Title',
    icon: 'info',
    content: '<p>Card content goes here.</p>',
    collapsible: true
});

Get started with a basic card in seconds. Cards work with pure CSS (no JavaScript required), but you can enhance them with hover effects using the Card component.

CSS-Only Card (No JavaScript)

<div class="card">
    <div class="card-body">
        <h3 class="card-title">Simple Card</h3>
        <p class="card-text">This card requires no JavaScript.</p>
    </div>
</div>

Card with Hover Effect (JavaScript)

// HTML
<div id="hover-card" class="card">
    <div class="card-body">
        <h3 class="card-title">Hover Me</h3>
        <p class="card-text">Move your cursor over this card.</p>
    </div>
</div>

// JavaScript
Domma.elements.card('#hover-card', { hover: true });

Learn how to build an interactive product card from scratch, step by step.

Step 1: HTML Structure

Start with the basic card structure using semantic class names:

<div id="product-card" class="card">
    <div class="card-body">
        <h3 class="card-title">Product Name</h3>
        <p class="card-text">Brief description of the product.</p>
    </div>
</div>

Step 2: Add Header and Footer

Expand the structure with a header (for images or badges) and footer (for actions):

<div id="product-card" class="card">
    <div class="card-header">
        <span class="badge badge-primary">New</span>
    </div>
    <div class="card-body">
        <h3 class="card-title">Premium Headphones</h3>
        <p class="card-text">High-quality wireless headphones with noise cancellation.</p>
        <p class="card-text"><strong>£149.99</strong></p>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary">Add to Cart</button>
    </div>
</div>

Step 3: Enable Hover Effect

Add the hover effect to make the card interactive:

const productCard = Domma.elements.card('#product-card', {
    hover: true  // Enables lift animation on hover
});

Step 4: Make It Clickable

Turn the entire card into a clickable link:

const productCard = Domma.elements.card('#product-card', {
    hover: true,
    clickable: true,
    onClick: (event) => {
        console.log('Card clicked!');
        window.location.href = '/product/premium-headphones';
    }
});

Step 5: Complete Working Demo

Here's the finished interactive product card:

Example 1: Basic Card

Simple card with title and content:

Example 2: Card with Hover Effect

Card that lifts on hover with enhanced shadow:

Example 3: Clickable Card

Entire card acts as a button:

Example 4: Styled Card (Primary)

Card with primary colour border:

Example 5: Profile Card

User profile with avatar and actions:

Example 6: Statistics Card

Dashboard metric with icon:

Example 7: Horizontal Card

Card with side-by-side layout:

Example 8: Grid of Cards

Multiple cards in a responsive grid:

Example 9: Collapsible Card

Card with collapsible content. Click the header to toggle, state persists via localStorage:

The .card-accent variant adds a prominent left border to highlight a card without changing its background colour. It is theme-aware — the border colour updates automatically when the theme changes. Five colour modifiers are available.

Example 1: Basic Accent Card

Left border using the primary theme colour (.card-accent):

<div class="card card-accent">
  <div class="card-body">
    <h3 class="card-title">Accent Card</h3>
    <p class="card-text">Content here</p>
  </div>
</div>

Example 2: Colour Variants

Four semantic colour modifiers map to the standard status design tokens:

<div class="card card-accent-success">...</div>
<div class="card card-accent-danger">...</div>
<div class="card card-accent-warning">...</div>
<div class="card card-accent-info">...</div>

Example 3: Accent + Hover

Combine .card-accent with .card-hover for an interactive card that lifts on hover while keeping the accent border:

<div class="card card-accent card-hover">
  <div class="card-body">...</div>
</div>

Example 4: Full Card Structure

Accent works seamlessly with the full header/body/footer structure:

<div class="card card-accent">
  <div class="card-header">Deployment Status</div>
  <div class="card-body">Build #1,042 passed all tests.</div>
  <div class="card-footer">Deployed 2 minutes ago</div>
</div>

Example 5: Practical — Notification Cards

A real-world pattern: status-aware notification cards using colour variants to convey urgency at a glance:

Example 6: JS Generation

Pass color: 'accent' to generate an accent card via the JavaScript API. The existing card-${color} pattern means no extra code is needed:

// color: 'accent' produces .card-accent automatically
E.card('#accent-js-card', {
    title: 'Generated Accent Card',
    icon: 'star',
    color: 'accent',
    content: '<p>Generated via JavaScript with color: "accent".</p>',
    collapsible: true
});

The Card component can now generate its HTML structure automatically from options, perfect for creating cards dynamically from data. This provides a "DataCard"-style API while maintaining backwards compatibility with existing HTML-based usage.

Example 1: Generated Card with Title and Content

Create a card entirely from JavaScript options:

Domma.elements.card('#generated-card', {
    title: 'Generated Card',
    content: '<p>This card was created entirely from JavaScript options.</p>',
    collapsible: true
});

Example 2: Card with Icon

Add an icon to the card title:

Domma.elements.card('#icon-card', {
    title: 'Settings',
    icon: 'settings',
    content: '<p>Configure your application settings here.</p>',
    collapsible: true
});

Example 3: Colored Card Variant

Apply a color variant to the card:

Domma.elements.card('#colored-card', {
    title: 'Important Notice',
    icon: 'alert',
    color: 'primary',
    content: '<p>This card uses the primary color variant.</p>',
    collapsible: true
});

Example 4: Initially Collapsed Card

Create a card that starts collapsed:

Domma.elements.card('#collapsed-card', {
    title: 'Click to Expand',
    icon: 'info',
    collapsed: true,
    collapsible: true,
    content: '<p>This card was initially collapsed.</p>'
});

Example 5: Programmatic Control

Control card state with JavaScript methods:

const card = Domma.elements.card('#controlled-card', {
    title: 'Controlled Card',
    icon: 'box',
    collapsible: true,
    content: '<p>Use the buttons to control this card.</p>'
});

// Control methods
$('#expand-btn').on('click', () => card.expand());
$('#collapse-btn').on('click', () => card.collapse());
$('#toggle-btn').on('click', () => card.toggle());

Example 6: Dynamic Content Updates

Update card content dynamically using setContent():

const card = Domma.elements.card('#dynamic-card', {
    title: 'Dynamic Content',
    icon: 'refresh',
    collapsible: true,
    content: '<p>Click the button to update this content.</p>'
});

$('#update-btn').on('click', () => {
    const timestamp = new Date().toLocaleTimeString();
    card.setContent(`<p>Content updated at ${timestamp}</p>`);
    card.updateHeight(); // Adjust height after content change
});

Example 7: Loading Data into Generated Cards

Perfect for dashboard widgets that load data asynchronously:

// Create card with loading state
const statsCard = Domma.elements.card('#stats-card', {
    title: 'User Statistics',
    icon: 'database',
    collapsible: true,
    content: '<div class="text-center">Loading...</div>'
});

// Simulate async data load
setTimeout(() => {
    const content = `
        <div class="grid grid-cols-2 gap-3">
            <div><strong>Total Users:</strong> 1,234</div>
            <div><strong>Active:</strong> 987</div>
            <div><strong>New Today:</strong> 42</div>
            <div><strong>Growth:</strong> +12%</div>
        </div>
    `;
    statsCard.setContent(content);
    statsCard.updateHeight();
}, 1500);

Backwards Compatibility

The enhancement is fully backwards compatible. Existing HTML-based card usage continues to work:

// Still works - enhances existing HTML
<div id="existing-card" class="card">
    <div class="card-body">Existing HTML</div>
</div>

Domma.elements.card('#existing-card', { hover: true });

The Card component automatically detects whether to generate HTML (when title or content options are provided) or enhance existing HTML.

Accessibility

• Semantic Structure: Use proper heading hierarchy (h1-h6) within card content
• Clickable Cards: If the entire card is clickable, add role="button" or wrap in an tag with meaningful aria-label
• Keyboard Navigation: Ensure clickable cards are focusable with Tab and activatable with Enter/Space
• Focus Indicators: Provide visible focus outlines for keyboard users (don't remove outline: none)
• Colour Contrast: Maintain WCAG AA contrast ratios (4.5:1 for text, 3:1 for UI components)
• Screen Readers: Add descriptive alt text for images within cards

:root {
    /* Dark card theme */
    --dm-card-bg: #1e293b;
    --dm-card-border: #334155;
    --dm-card-shadow: 0 10px 15px rgba(0,0,0,0.3);

    /* Or flat design */
    --dm-card-shadow: none;
    --dm-radius-lg: 0;
}

Full CSS Customisation Cheat-Sheet →

Cards work great with these complementary components: