Cards

Versatile content containers that group related information with visual hierarchy and optional persona theming.

Basic Card

The default card provides a subtle elevated surface for content grouping.

Card Title

This is a basic card with some example content. Cards help organize information into digestible chunks.

<div class="card">
  <h3 class="card-title">Card Title</h3>
  <p class="card-text">Card content goes here.</p>
</div>

Card with Header

Cards can have a distinct header section for titles and actions.

Daily Check-in

New

How are you feeling today? Take a moment to reflect on your energy and mood.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Daily Check-in</h3>
    <span class="card-badge">New</span>
  </div>
  <div class="card-body">
    <p class="card-text">Content here...</p>
  </div>
</div>

Persona Accent Cards

Cards can feature persona colors as accent borders to indicate context.

Ferni

A message from your Chief of Staff about today's priorities.

Maya

Your habit streak is looking strong! Let's build on that momentum.

Peter

I found some interesting research related to your question.

<div class="card card--accent card--accent-ferni">
  <div class="card-header">
    <div class="card-persona">
      <div class="persona-dot persona-dot--ferni"></div>
      <span>Ferni</span>
    </div>
  </div>
  <div class="card-body">
    <p class="card-text">Content...</p>
  </div>
</div>

Interactive Cards

Cards can be clickable for navigation or selection.

Clickable Card

This entire card is clickable. Hover to see the interaction effect.

Selected State

This card shows the selected state with a highlighted border.

<a href="/path" class="card card--interactive">
  <h3 class="card-title">Clickable Card</h3>
  <p class="card-text">Content...</p>
</a>

<div class="card card--interactive card--selected">
  <h3 class="card-title">Selected Card</h3>
  <p class="card-text">Content...</p>
</div>

Elevation Levels

Cards support different elevation levels for visual hierarchy.

Flat

No shadow, minimal elevation.

Raised

Default elevation with subtle shadow.

Elevated

Higher elevation for emphasis.

<div class="card card--flat">...</div>
<div class="card card--raised">...</div>  
<div class="card card--elevated">...</div>

Card with Footer

Cards can include a footer for actions or metadata.

Weekly Summary

You completed 5 habits this week and had 3 meaningful conversations with your AI team.

Updated 2 hours ago 
<div class="card">
  <div class="card-header">...</div>
  <div class="card-body">...</div>
  <div class="card-footer">
    <span class="card-meta">Updated 2 hours ago</span>
    <button class="btn btn-ghost btn-sm">View Details</button>
  </div>
</div>

CSS Custom Properties

Token Description
--bg-elevated Card background color
--border-subtle Card border color
--radius-xl Card border radius
--shadow-sm Flat elevation shadow
--shadow-md Raised elevation shadow
--shadow-lg Elevated shadow

Full CSS

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--duration-normal) var(--ease-ease-out);
}

/* Elevation */
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }
.card--elevated { box-shadow: var(--shadow-lg); }

/* Sections */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}

.card-body {
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4);
}

/* Typography */
.card-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  margin: 0;
}

.card-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Persona Accents */
.card--accent { border-left-width: 3px; }
.card--accent-ferni { border-left-color: var(--persona-ferni); }
.card--accent-maya { border-left-color: var(--persona-maya); }
.card--accent-peter { border-left-color: var(--persona-peter); }
.card--accent-alex { border-left-color: var(--persona-alex); }
.card--accent-jordan { border-left-color: var(--persona-jordan); }
.card--accent-nayan { border-left-color: var(--persona-nayan); }

/* Interactive */
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card--interactive:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card--selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

Accessibility

Semantic Structure

Use proper heading hierarchy within cards. Card titles should use <h3> or appropriate level.

Interactive Cards

Clickable cards should use <a> or <button> for proper keyboard access.

Color Contrast

Persona accent borders are decorative. Never rely solely on color to convey information.