Brand
Changelogv1.4

Card

Cards group related content and actions into a visually contained layout.

Basic Card

Card Title

This is a basic card with some descriptive content inside.

With Image

Image Placeholder

Image Card

Cards can include images or figures above the body content.

Compact

Compact Card

Less padding for denser layouts.

Card with Badge

NotificationsNEW

You have 3 unread messages in your inbox.

Card Grid

Analytics

View real-time metrics and dashboards.

Reports

Generate and export business reports.

Settings

Configure preferences and options.

Usage

<div class="bos:dui-card bos:bg-base-100 bos:shadow-md">
  <div class="bos:dui-card-body">
    <h2 class="bos:dui-card-title">Title</h2>
    <p>Content goes here.</p>
    <div class="bos:dui-card-actions bos:justify-end">
      <button class="bos:dui-btn bos:dui-btn-primary">Action</button>
    </div>
  </div>
</div>