Card

Cards are versatile containers that group related content and actions. They provide a clean way to present information.

Usage

Use cards to group related content, create visual hierarchy, and provide clear boundaries between sections.

Basic Card

Card Title

This is a basic card with some content. Cards are great for organizing information.

<div class="df-card">
  <div class="df-card__body">
    <h3 class="df-card__title">Card Title</h3>
    <p class="df-card__text">Card content goes here.</p>
  </div>
</div>

With Image

Featured Article

A compelling description that makes users want to learn more about this content.

<div class="df-card">
  <img class="df-card__image" src="..." alt="...">
  <div class="df-card__body">
    <h3 class="df-card__title">Featured Article</h3>
    <p class="df-card__text">Description here.</p>
  </div>
</div>

With Header and Footer

Project UpdateActive

The project is progressing well. We've completed 75% of the planned features.

<div class="df-card">
  <div class="df-card__header">
    <span class="df-card__header-title">Project Update</span>
    <span class="df-badge df-badge--success">Active</span>
  </div>
  <div class="df-card__body">
    <p class="df-card__text">Content here.</p>
  </div>
  <div class="df-card__footer">
    <button class="df-button">View Details</button>
    <button class="df-button df-button--primary">Take Action</button>
  </div>
</div>

Clickable Card

Click Me

This entire card is clickable and links to another page.

<a href="/page" class="df-card df-card--clickable">
  <div class="df-card__body">
    <h3 class="df-card__title">Click Me</h3>
    <p class="df-card__text">Clickable card content.</p>
  </div>
</a>

Card Variants

Elevated

Elevated Card

Has a subtle shadow for depth.

Outlined

Outlined Card

Uses a border instead of shadow.

Filled

Filled Card

Has a subtle background color.

Card with List

Team Members

• JD
  John Doe
• JS
  Jane Smith
• BW
  Bob Wilson

Horizontal Card

Horizontal Layout

Cards can be laid out horizontally for a different presentation style.

<div class="df-card df-card--horizontal">
  <img class="df-card__image" src="..." alt="...">
  <div class="df-card__body">
    <h3 class="df-card__title">Horizontal Layout</h3>
    <p class="df-card__text">Description here.</p>
  </div>
</div>

Card Grid

Card One

First card in the grid.

Card Two

Second card in the grid.

Card Three

Third card in the grid.

<div class="df-card-grid">
  <div class="df-card">...</div>
  <div class="df-card">...</div>
  <div class="df-card">...</div>
</div>

Accessibility

• Use semantic headings for card titles
• Ensure clickable cards have appropriate focus states
• Add alt text to card images
• Use sufficient color contrast

Best Practices

• Keep card content concise
• Use consistent card sizes in grids
• Limit actions to 2-3 per card
• Consider card loading states for async content

API Reference

Classes

Class	Description
df-card	Base card class
df-card--elevated	Card with shadow
df-card--outlined	Card with border
df-card--filled	Card with background
df-card--clickable	Interactive card
df-card--horizontal	Horizontal layout
df-card__header	Card header
df-card__body	Card body
df-card__footer	Card footer
df-card__image	Card image
df-card__title	Card title
df-card__text	Card text