# Cards Cards are flexible content containers with multiple variants for displaying different types of content. ## Basic Card ```html
Card Title

Some quick example text to build on the card title.

Go somewhere
``` ## Card Components ### Card Header & Footer ```html
Featured
Special title treatment

With supporting text below.

2 days ago
``` ### Card with Image ```html
...
Card title

Card content

...
Card title

Overlay content

``` ## Card Variations ### Bordered Cards ```html
Header
Primary card

Example text content.

``` ### Background Colors ```html
Primary card

White text on colored background.

``` ### Card without Border ```html
Borderless Card

Card with shadow instead of border.

``` ## Dashboard Cards ### Stat Card ```html
Total Revenue

$24,563

12.5%
``` ### Chart Card ```html
Sales Overview
``` ### Activity Card ```html
Recent Activity
``` ## Card Layouts ### Card Group ```html
Card 1
Card 2
Card 3
``` ### Card Grid ```html
Card 1
Card 2
``` ## Interactive Cards ### Clickable Card ```html
Clickable Card

Entire card is clickable.

``` ### Collapsible Card ```html
Collapsible Card
Card content that can be toggled.
``` ## Custom Card Styles ### Loading Card ```html

Loading content...

``` ### Empty State Card ```html
No Data Available

There's nothing to display at the moment.

``` ## JavaScript Usage ### Dynamic Card Creation ```javascript function createStatCard(title, value, change, icon) { return `
${title}

${value}

${Math.abs(change)}%
`; } // Usage const container = document.getElementById('stats-container'); container.innerHTML = createStatCard('Revenue', '$12,345', 5.2, 'fa-solid fa-dollar-sign'); ``` ### Card State Management ```javascript // Toggle card loading state function setCardLoading(card, loading = true) { const cardBody = card.querySelector('.card-body'); if (loading) { cardBody.innerHTML = `
`; } else { // Restore content } } // Refresh card content async function refreshCard(cardId) { const card = document.getElementById(cardId); setCardLoading(card, true); try { const data = await fetchCardData(cardId); updateCardContent(card, data); } finally { setCardLoading(card, false); } } ``` ## Accessibility - Use semantic HTML structure - Provide appropriate headings hierarchy - Include alt text for images - Ensure sufficient color contrast - Make interactive cards keyboard accessible ## Best Practices ### DO: - Keep card content concise - Use consistent spacing - Group related information - Provide visual hierarchy - Test responsive behavior ### DON'T: - Don't overload cards with content - Don't mix too many card styles - Don't forget hover/focus states - Don't use cards for everything