Free Component
Modern Kanban Task Card
A project management Kanban task card with priority pill, progress bar, checklist counter, and assignee avatar stack.
Colours in this gradient
#0f172a#3b82f6#10b981#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="kanban-stage">
<div class="kanban-card">
<div class="k-header">
<span class="k-badge kb-high">High Priority</span>
<button class="k-menu-btn">•••</button>
</div>
<div class="k-title">Implement Webhook Signature Verification</div>
<div class="k-desc">Validate incoming HMAC-SHA256 signatures on payment callbacks to prevent replay attacks.</div>
<div class="k-progress-bar">
<div class="k-progress-fill" style="width: 75%;"></div>
</div>
<div class="k-footer">
<div class="k-meta">
<span class="k-icon-text">📋 3/4 tasks</span>
<span class="k-icon-text">💬 6</span>
</div>
<div class="k-avatars">
<div class="k-avatar av1">RJ</div>
<div class="k-avatar av2">AL</div>
</div>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a modern dark project management Kanban task card in HTML and CSS.
Requirements:
- Card container with hover elevation and subtle border highlight.
- Priority badge ("High Priority"), title, and task description.
- Progress bar displaying completed tasks percentage.
- Footer with task checklist stats and overlapping user avatar stack.
Return one HTML file with a <style> block.How to build it, step by step
- 1
Structure card with header, body content, progress track and footer.
- 2
Use negative margin on avatar circles to create overlapping avatar stack.
- 3
Add subtle translateY hover lift effect.
Customisation tips
- Set cursor: grab to visually indicate the card is drag-and-drop ready.