Theme:
Card
Cards group related content and actions. They support titles, body text, action buttons, images, borders, and compact layouts.
Basic Card
Team Meeting
Discuss Q1 goals and assign project leads for the upcoming sprint cycle.
<div class="dui-card">
<div class="dui-card-body">
<h2 class="dui-card-title">Team Meeting</h2>
<p>Discuss Q1 goals and assign project leads.</p>
<div class="dui-card-actions">
<button class="dui-btn dui-btn-primary">Join now</button>
</div>
</div>
</div>
Bordered Card
Subscription Plan
You are currently on the Pro plan. Next billing date: March 15, 2026.
<div class="dui-card dui-card-bordered">
<div class="dui-card-body">
<h2 class="dui-card-title">Subscription Plan</h2>
<p>You are currently on the Pro plan.</p>
<div class="dui-card-actions">
<button class="dui-btn dui-btn-ghost">Cancel</button>
<button class="dui-btn dui-btn-primary">Upgrade</button>
</div>
</div>
</div>
Compact Card
Quick Note
Remember to review the pull request before end of day.
<div class="dui-card dui-card-bordered dui-card-compact">
<div class="dui-card-body">
<h2 class="dui-card-title">Quick Note</h2>
<p>Remember to review the pull request before end of day.</p>
</div>
</div>
Card with Image
Image placeholder
Project Showcase
A responsive dashboard built with DengaUI components and Alpine.js.
<div class="dui-card dui-card-bordered">
<div class="dui-card-image">
<img src="project.jpg" alt="Project screenshot" />
</div>
<div class="dui-card-body">
<h2 class="dui-card-title">Project Showcase</h2>
<p>A responsive dashboard built with DengaUI.</p>
<div class="dui-card-actions">
<button class="dui-btn dui-btn-primary dui-btn-sm">View project</button>
</div>
</div>
</div>