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 Card
Cards can include images or figures above the body content.
Compact
Compact Card
Less padding for denser layouts.
Card with Badge
Notifications NEW
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="sa:dui-card sa:bg-base-100 sa:shadow-md">
<div class="sa:dui-card-body">
<h2 class="sa:dui-card-title">Title</h2>
<p>Content goes here.</p>
<div class="sa:dui-card-actions sa:justify-end">
<button class="sa:dui-btn sa:dui-btn-primary">Action</button>
</div>
</div>
</div>