Card

Constructor Options

Methods

Events

CSS Classes

Cards work beautifully with pure CSS, but you can enhance them with JavaScript for dynamic content loading, filtering, sorting, animations, and interactive features using Domma's declarative configuration.

Dynamic Content Loading

$.setup({
    '#product-grid': {
        events: {
            ready: async (e, $container) => {
                // Load products from API
                const products = await Domma.http.get('/api/products');

                // Render cards
                const html = _.map(products, product => `
                    <div class="card card-hover">
                        <img src="${product.image}" alt="${product.name}" class="card-img-top">
                        <div class="card-body">
                            <h4 class="card-title">${product.name}</h4>
                            <p class="card-text">${_.truncate(product.description, { length: 100 })}</p>
                            <div class="card-footer">
                                <span class="price">$${product.price}</span>
                                <button class="btn btn-primary btn-sm"
                                        data-id="${product.id}">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>
                `).join('');

                $container.html(html);
            },

            'click [data-id]': (e) => {
                const productId = $(e.currentTarget).attr('data-id');
                // Add to cart logic
                Domma.elements.toast.success('Added to cart!');
            }
        }
    }
});

Filterable Card Grid

$.setup({
    '#blog-grid': {
        initial: {
            data: { posts: [], filteredPosts: [], activeCategory: 'all' }
        },
        events: {
            ready: async (e, $el) => {
                const posts = await Domma.http.get('/api/posts');
                $el.data('posts', posts);
                $el.data('filteredPosts', posts);
                renderCards($el, posts);
            },

            'click [data-category]': (e, $el) => {
                const category = $(e.currentTarget).attr('data-category');
                const allPosts = $el.data('posts');

                // Filter posts
                const filtered = category === 'all'
                    ? allPosts
                    : _.filter(allPosts, { category });

                $el.data('activeCategory', category);
                $el.data('filteredPosts', filtered);

                // Update UI
                $('.category-filter').removeClass('active');
                $(e.currentTarget).addClass('active');

                // Render with animation
                $('.cards-container').fadeOut(200, function() {
                    renderCards($el, filtered);
                    $(this).fadeIn(200);
                });
            }
        }
    }
});

function renderCards($container, posts) {
    const html = _.map(posts, post => `
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">${post.title}</h4>
                <p class="card-text">${_.truncate(post.excerpt, { length: 120 })}</p>
                <a href="/post/${post.slug}" class="btn btn-outline">Read More</a>
            </div>
        </div>
    `).join('');

    $container.find('.cards-container').html(html);
}

Sortable Cards

$.setup({
    '#team-grid': {
        initial: {
            data: { members: [] }
        },
        events: {
            ready: async (e, $el) => {
                const members = await Domma.http.get('/api/team');
                $el.data('members', members);
                renderTeam($el, members);
            },

            'change #sort-by': (e, $el) => {
                const sortBy = $(e.target).val();
                const members = $el.data('members');

                // Sort with utils
                const sorted = sortBy === 'name'
                    ? _.sortBy(members, 'name')
                    : _.orderBy(members, ['role', 'name'], ['asc', 'asc']);

                renderTeam($el, sorted);
            }
        }
    }
});

function renderTeam($container, members) {
    const html = _.map(members, member => `
        <div class="card text-center">
            <img src="${member.avatar}" alt="${member.name}"
                 class="card-img-top" class="team-member-avatar">
            <div class="card-body">
                <h4 class="card-title">${member.name}</h4>
                <p class="card-text">${member.role}</p>
            </div>
        </div>
    `).join('');

    $container.find('.team-container').html(html);
}

Interactive Card Actions

$.setup({
    '.product-card': {
        component: 'card',
        options: { hover: true, clickable: true },
        events: {
            click: (e, $card) => {
                const productId = $card.attr('data-product');
                window.location.href = `/product/${productId}`;
            },

            'click .btn-favorite': (e) => {
                e.stopPropagation(); // Don't trigger card click

                const $btn = $(e.currentTarget);
                const $card = $btn.closest('.card');
                const productId = $card.attr('data-product');

                // Toggle favorite
                $btn.toggleClass('active');
                const isFavorite = $btn.hasClass('active');

                Domma.http.post('/api/favorites', { productId, favorite: isFavorite })
                    .then(() => {
                        Domma.elements.toast.success(
                            isFavorite ? 'Added to favorites' : 'Removed from favorites'
                        );
                    });
            },

            'mouseenter': (e, $card) => {
                $card.find('.quick-actions').fadeIn(200);
            },

            'mouseleave': (e, $card) => {
                $card.find('.quick-actions').fadeOut(200);
            }
        }
    }
});

Benefits of Hybrid Approach

• Performance - CSS handles layout instantly, JS loads dynamic content
• Flexibility - Static cards + dynamic data = powerful combination
• Interactivity - Filtering, sorting, actions enhance UX
• Maintainability - Centralized logic with $.setup()

CSS-Only vs CSS+JS Hybrid

<div class="card">
    <img src="image.jpg"
         class="card-img-top"
         alt="Product">
    <div class="card-body">
        <h4 class="card-title">
            Static Product
        </h4>
        <p class="card-text">
            Fixed content
        </p>
        <a href="#" class="btn">
            View
        </a>
    </div>
</div>

<!-- No dynamic content -->

<div id="products">
    <!-- Cards loaded via JS -->
</div>

<script>
$.setup({
    '#products': {
        events: {
            ready: async (e, $el) => {
                const products = await
                    Domma.http.get('/api/products');

                const html = _.map(products, p => `
                    <div class="card">
                        ...
                    </div>
                `).join('');

                $el.html(html);
            }
        }
    }
});
</script>