Bulma Card

The Card component in Bulma is a versatile container that can hold virtually any type of content. It's perfect for displaying articles, products, user profiles, and other content in an organized, visually appealing manner.

Basic Card Structure

A card consists of several optional parts:

<div class="card">
  <!-- Card header (optional) -->
  <header class="card-header">
    <p class="card-header-title">Card Title</p>
  </header>
  
  <!-- Card image (optional) -->
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder" />
    </figure>
  </div>
  
  <!-- Card content (required for content) -->
  <div class="card-content">
    <div class="content">
      <p>Card content goes here. This is where you put your main information.</p>
    </div>
  </div>
  
  <!-- Card footer (optional) -->
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

Card Title

Card content goes here. This is where you put your main information.

Card Components

Card Header

<header class="card-header">
  <!-- Simple title -->
  <p class="card-header-title">Product Name</p>
  
  <!-- Title with icon -->
  <p class="card-header-title">
    <span class="icon">
      <i class="fas fa-star"></i>
    </span>
    <span>Featured</span>
  </p>
  
  <!-- Header with action button -->
  <button class="card-header-icon" aria-label="more options">
    <span class="icon">
      <i class="fas fa-angle-down"></i>
    </span>
  </button>
</header>

Card Image

<div class="card-image">
  <!-- Basic image -->
  <figure class="image is-4by3">
    <img src="image.jpg" alt="Description" />
  </figure>
  
  <!-- Image with overlay -->
  <div class="card-image">
    <figure class="image is-16by9">
      <img src="image.jpg" alt="Description" />
    </figure>
    <div class="card-content is-overlay">
      <p class="title is-4 has-text-white">Overlay Text</p>
    </div>
  </div>
</div>

Card Content

<div class="card-content">
  <!-- Simple content -->
  <div class="content">
    <p>Main content goes here.</p>
  </div>
  
  <!-- Content with media object -->
  <article class="media">
    <figure class="media-left">
      <p class="image is-48x48">
        <img src="avatar.jpg" />
      </p>
    </figure>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>John Doe</strong>
          <br />
          Content with media alignment.
        </p>
      </div>
    </div>
  </article>
</div>

Card Footer

<footer class="card-footer">
  <!-- Simple footer items -->
  <a href="#" class="card-footer-item">View</a>
  <a href="#" class="card-footer-item">Edit</a>
  
  <!-- Footer with icons -->
  <a href="#" class="card-footer-item">
    <span class="icon">
      <i class="fas fa-heart"></i>
    </span>
    <span>Like</span>
  </a>
  
  <!-- Disabled footer item -->
  <span class="card-footer-item is-disabled">Disabled</span>
</footer>

Card Variations

Compact Card

<div class="card">
  <div class="card-content">
    <div class="content">
      <p class="is-size-6">Compact card with smaller text.</p>
    </div>
  </div>
</div>

Wide Card

<div class="card is-wide">
  <div class="card-content">
    <p>Wide card that takes more horizontal space.</p>
  </div>
</div>

Interactive Card (Hover Effects)

<div class="card is-clickable">
  <div class="card-content">
    <p>This card has hover effects and is clickable.</p>
  </div>
</div>

Colored Cards

<!-- Primary card -->
<div class="card has-background-primary has-text-white">
  <div class="card-content">
    <p>Primary colored card.</p>
  </div>
</div>

<!-- Success card with light background -->
<div class="card has-background-success-light">
  <div class="card-content">
    <p>Success card with light background.</p>
  </div>
</div>

Card Layouts in Grid

Cards in Columns

<div class="columns is-multiline">
  <div class="column is-4">
    <div class="card">
      <div class="card-content">
        <p>Card 1</p>
      </div>
    </div>
  </div>
  <div class="column is-4">
    <div class="card">
      <div class="card-content">
        <p>Card 2</p>
      </div>
    </div>
  </div>
  <div class="column is-4">
    <div class="card">
      <div class="card-content">
        <p>Card 3</p>
      </div>
    </div>
  </div>
</div>

Responsive Card Grid

<div class="columns is-multiline">
  <div class="column is-12-mobile is-6-tablet is-4-desktop">
    <div class="card">
      <div class="card-content">
        <p>Responsive card</p>
      </div>
    </div>
  </div>
  <!-- More cards... -->
</div>

Use Cases

1. Product Card

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="product.jpg" alt="Product image" />
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">Product Name</p>
        <p class="subtitle is-6">$29.99</p>
      </div>
    </div>
    <div class="content">
      <p>Product description goes here. This is a brief description of the product features.</p>
      <div class="tags">
        <span class="tag is-primary">In Stock</span>
        <span class="tag is-light">Free Shipping</span>
      </div>
      <br />
      <time datetime="2023-12-01">Added: 1 Dec 2023</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="fas fa-shopping-cart"></i>
      </span>
      <span>Add to Cart</span>
    </a>
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="fas fa-heart"></i>
      </span>
      <span>Save</span>
    </a>
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="fas fa-share"></i>
      </span>
      <span>Share</span>
    </a>
  </footer>
</div>

2. User Profile Card

<div class="card">
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-64x64">
          <img class="is-rounded" src="avatar.jpg" alt="Profile" />
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Doe</p>
        <p class="subtitle is-6">@johndoe</p>
      </div>
    </div>
    <div class="content">
      <p>Frontend Developer | UI/UX Designer</p>
      <p>📍 San Francisco, CA</p>
      <br />
      <div class="tags">
        <span class="tag is-primary">JavaScript</span>
        <span class="tag is-info">React</span>
        <span class="tag is-success">Bulma</span>
        <span class="tag is-warning">CSS</span>
      </div>
      <br />
      <div class="buttons">
        <button class="button is-primary">Follow</button>
        <button class="button is-light">Message</button>
      </div>
    </div>
  </div>
</div>

3. Blog Post Card

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Blog Post Title</p>
    <button class="card-header-icon" aria-label="bookmark">
      <span class="icon">
        <i class="fas fa-bookmark"></i>
      </span>
    </button>
  </header>
  <div class="card-image">
    <figure class="image is-16by9">
      <img src="blog-image.jpg" alt="Blog post image" />
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      <p>This is a brief excerpt from the blog post. It gives readers a preview of the content and encourages them to click through to read more.</p>
      <br />
      <div class="media">
        <div class="media-left">
          <figure class="image is-32x32">
            <img class="is-rounded" src="author.jpg" alt="Author" />
          </figure>
        </div>
        <div class="media-content">
          <p class="subtitle is-6">Written by <strong>Jane Smith</strong></p>
          <p class="subtitle is-7">Published on December 1, 2023 • 5 min read</p>
        </div>
      </div>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="far fa-thumbs-up"></i>
      </span>
      <span>Like</span>
    </a>
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="far fa-comment"></i>
      </span>
      <span>Comment</span>
    </a>
    <a href="#" class="card-footer-item">
      <span class="icon">
        <i class="fas fa-share"></i>
      </span>
      <span>Share</span>
    </a>
  </footer>
</div>

4. Dashboard Stat Card

<div class="card">
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48 has-background-primary has-text-white is-flex is-align-items-center is-justify-content-center">
          <i class="fas fa-users fa-lg"></i>
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-3">1,254</p>
        <p class="subtitle is-6">Total Users</p>
      </div>
    </div>
    <div class="content">
      <p class="has-text-success">
        <span class="icon">
          <i class="fas fa-arrow-up"></i>
        </span>
        <span>12.5% increase from last month</span>
      </p>
    </div>
  </div>
</div>

5. Pricing Card

<div class="card has-text-centered">
  <header class="card-header">
    <p class="card-header-title is-centered is-size-4">Pro Plan</p>
  </header>
  <div class="card-content">
    <div class="content">
      <p class="title is-1">$29</p>
      <p class="subtitle is-6">per month</p>
      <ul class="has-text-left">
        <li>✅ 10 Projects</li>
        <li>✅ 5GB Storage</li>
        <li>✅ Priority Support</li>
        <li>✅ Advanced Analytics</li>
        <li>✅ API Access</li>
      </ul>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item is-primary has-text-weight-bold">
      Get Started
    </a>
  </footer>
</div>

Advanced Card Features

Card with Tabs

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Card with Tabs</p>
  </header>
  <div class="card-content">
    <div class="tabs">
      <ul>
        <li class="is-active"><a>Tab 1</a></li>
        <li><a>Tab 2</a></li>
        <li><a>Tab 3</a></li>
      </ul>
    </div>
    <div class="content">
      <p>Content for the active tab goes here.</p>
    </div>
  </div>
</div>

Card with Modal

<div class="card">
  <div class="card-content">
    <p>Card content with modal trigger.</p>
    <button class="button is-primary modal-button" data-target="modal-card">
      Open Modal
    </button>
  </div>
</div>

Card with Dropdown

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Card with Dropdown</p>
    <div class="card-header-icon dropdown is-right">
      <div class="dropdown-trigger">
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
          <span class="icon">
            <i class="fas fa-ellipsis-v"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a href="#" class="dropdown-item">Edit</a>
          <a href="#" class="dropdown-item">Duplicate</a>
          <hr class="dropdown-divider">
          <a href="#" class="dropdown-item has-text-danger">Delete</a>
        </div>
      </div>
    </div>
  </header>
  <div class="card-content">
    <p>Card content here.</p>
  </div>
</div>

Customization

/* Custom card styles */
.card {
  /* Custom border radius */
  border-radius: 12px;
  
  /* Custom shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Custom border */
  border: 1px solid #e0e0e0;
  
  /* Smooth transition */
  transition: all 0.3s ease;
}

/* Hover effects */
.card.is-hoverable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Custom card header */
.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-header-title {
  color: white;
}

/* Custom card footer */
.card-footer {
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.card-footer-item:hover {
  background-color: #f0f0f0;
}

/* Card with gradient border */
.card.has-gradient-border {
  border: double 3px transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(135deg, #667eea, #764ba2);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Accessibility

<!-- Card with proper ARIA labels -->
<div class="card" role="article" aria-labelledby="card-title-1">
  <header class="card-header">
    <h2 id="card-title-1" class="card-header-title">Article Title</h2>
  </header>
  <div class="card-content">
    <p>Article content here.</p>
  </div>
</div>

<!-- Interactive card with keyboard support -->
<div class="card is-clickable" tabindex="0" role="button">
  <div class="card-content">
    <p>Clickable card with keyboard support.</p>
  </div>
</div>

<!-- Card with screen reader text -->
<div class="card">
  <div class="card-content">
    <p>Regular content</p>
    <span class="sr-only">Additional information for screen readers</span>
  </div>
</div>

Best Practices

Use consistent card sizes within the same section
Include clear call-to-action buttons in card footers
Use appropriate images with correct aspect ratios
Keep card content focused and concise
Use color and typography to create visual hierarchy
Make cards responsive for different screen sizes
Add hover effects for interactive cards
Ensure sufficient contrast for accessibility
Test card layouts on various devices

Tip: Cards are incredibly versatile. You can combine them with other Bulma components like Media Object, Level, and Tags to create complex, information-rich layouts.

Up next: Bulma Content Component

Bulma CSS Tutorial