Project Task Board

A project task board composed from responsive grids, cards, chips, avatars, status badges and task actions.

Sprint board

Group tasks by workflow state, keep ownership and due dates visible, and label every action with the task it affects. The columns stack on small screens so reading order and keyboard order remain predictable.

Website launch

Sprint 14

Five tasks across three workflow stages. Sprint ends September 18.

All assigneesLaunchDue this sprint

To do

2 tasks

Finalize mobile navigation

Due soon

Review focus order and compact-menu behavior before handoff.

AccessibilityFrontend

Approve launch-page copy

Planned

Resolve the final legal notes and prepare localized strings.

Content

In progress

2 tasks

Polish checkout states

Blocked

Waiting for the updated payment-error messages from support.

FrontendCheckout

Connect launch analytics

On track

Add campaign events and verify the reporting dashboard.

Analytics

Done

1 task

Optimize hero assets

Completed

Compressed responsive images and confirmed performance budgets.

PerformanceAssets

<section aria-labelledby="task-board-heading">
<header class="d-flex flex-column flex-md-row align-items-md-center gap-3 py-3 mb-3">
	<div>
		<div class="d-flex flex-wrap align-items-center gap-2">
			<h3 class="h4 mb-0" id="task-board-heading">Website launch</h3>
			<span class="badge bg-primary">Sprint 14</span>
		</div>
		<p class="text-muted mb-0" id="task-board-description">Five tasks across three workflow stages. Sprint ends September 18.</p>
	</div>
	<button class="btn btn-solid btn-primary ms-md-auto" type="button" data-toast="New task form opened">
		<span>Add task</span>
	</button>
</header>

<div class="d-flex flex-wrap gap-2 mb-4" aria-label="Active board filters">
	<span class="chip chip-primary chip-solid"><span class="chip-label">All assignees</span></span>
	<span class="chip chip-secondary chip-outline"><span class="chip-label">Launch</span></span>
	<span class="chip chip-warning chip-outline"><span class="chip-label">Due this sprint</span></span>
</div>

<div class="grid" aria-describedby="task-board-description">
	<section class="card shadow-sm col-12 col-md-6 col-lg-4 h-100" aria-labelledby="task-board-todo">
		<header class="card-header d-flex align-items-center gap-2">
			<h4 class="h5 card-title mb-0" id="task-board-todo">To do</h4>
			<span class="badge bg-secondary ms-auto">2 tasks</span>
		</header>
		<div class="card-body d-flex flex-column gap-3">
			<article class="card border-primary" aria-labelledby="task-navigation-title">
				<div class="card-body d-flex flex-column gap-2">
					<header class="d-flex align-items-start gap-2">
						<h5 class="h6 card-title mb-0" id="task-navigation-title">Finalize mobile navigation</h5>
						<span class="badge bg-warning ms-auto">Due soon</span>
					</header>
					<p class="text-muted mb-0">Review focus order and compact-menu behavior before handoff.</p>
					<div class="d-flex flex-wrap gap-1" aria-label="Task labels">
						<span class="chip chip-primary chip-outline"><span class="chip-label">Accessibility</span></span>
						<span class="chip chip-secondary chip-outline"><span class="chip-label">Frontend</span></span>
					</div>
					<footer class="d-flex flex-column gap-2 mt-1">
						<div class="d-flex align-items-center gap-2">
							<span class="avatar avatar-sm bg-primary" aria-hidden="true">AM</span>
							<span class="text-sm">Assigned to Alex Morgan</span>
						</div>
						<div class="d-flex flex-wrap gap-1">
							<button class="btn btn-text btn-primary btn-sm" type="button" data-toast="Finalize mobile navigation opened">Open task</button>
							<button class="btn btn-outline btn-primary btn-sm ms-auto" type="button" data-toast="Finalize mobile navigation moved to In progress">Start task</button>
						</div>
					</footer>
				</div>
			</article>

			<article class="card" aria-labelledby="task-copy-title">
				<div class="card-body d-flex flex-column gap-2">
					<header class="d-flex align-items-start gap-2">
						<h5 class="h6 card-title mb-0" id="task-copy-title">Approve launch-page copy</h5>
						<span class="badge bg-secondary ms-auto">Planned</span>
					</header>
					<p class="text-muted mb-0">Resolve the final legal notes and prepare localized strings.</p>
					<div class="d-flex flex-wrap gap-1" aria-label="Task labels">
						<span class="chip chip-warning chip-outline"><span class="chip-label">Content</span></span>
					</div>
					<footer class="d-flex flex-column gap-2 mt-1">
						<div class="d-flex align-items-center gap-2">
							<span class="avatar avatar-sm bg-warning" aria-hidden="true">SR</span>
							<span class="text-sm">Assigned to Sam Rivera</span>
						</div>
						<div class="d-flex flex-wrap gap-1">
							<button class="btn btn-text btn-primary btn-sm" type="button" data-toast="Approve launch-page copy opened">Open task</button>
							<button class="btn btn-outline btn-primary btn-sm ms-auto" type="button" data-toast="Approve launch-page copy moved to In progress">Start task</button>
						</div>
					</footer>
				</div>
			</article>
		</div>
	</section>

	<section class="card shadow-sm col-12 col-md-6 col-lg-4 h-100" aria-labelledby="task-board-progress">
		<header class="card-header d-flex align-items-center gap-2">
			<h4 class="h5 card-title mb-0" id="task-board-progress">In progress</h4>
			<span class="badge bg-primary ms-auto">2 tasks</span>
		</header>
		<div class="card-body d-flex flex-column gap-3">
			<article class="card border-primary bg-primary bg-opacity-10" aria-labelledby="task-checkout-title">
				<div class="card-body d-flex flex-column gap-2">
					<header class="d-flex align-items-start gap-2">
						<h5 class="h6 card-title mb-0" id="task-checkout-title">Polish checkout states</h5>
						<span class="badge bg-error ms-auto">Blocked</span>
					</header>
					<p class="text-muted mb-0">Waiting for the updated payment-error messages from support.</p>
					<div class="d-flex flex-wrap gap-1" aria-label="Task labels">
						<span class="chip chip-secondary chip-outline"><span class="chip-label">Frontend</span></span>
						<span class="chip chip-error chip-outline"><span class="chip-label">Checkout</span></span>
					</div>
					<footer class="d-flex flex-column gap-2 mt-1">
						<div class="d-flex align-items-center gap-2">
							<span class="avatar avatar-sm bg-secondary" aria-hidden="true">ML</span>
							<span class="text-sm">Assigned to Morgan Lee</span>
						</div>
						<div class="d-flex flex-wrap gap-1">
							<button class="btn btn-text btn-primary btn-sm" type="button" data-toast="Polish checkout states opened">Open task</button>
							<button class="btn btn-outline btn-error btn-sm ms-auto" type="button" data-toast="Blocker details opened">View blocker</button>
						</div>
					</footer>
				</div>
			</article>

			<article class="card" aria-labelledby="task-analytics-title">
				<div class="card-body d-flex flex-column gap-2">
					<header class="d-flex align-items-start gap-2">
						<h5 class="h6 card-title mb-0" id="task-analytics-title">Connect launch analytics</h5>
						<span class="badge bg-success ms-auto">On track</span>
					</header>
					<p class="text-muted mb-0">Add campaign events and verify the reporting dashboard.</p>
					<div class="d-flex flex-wrap gap-1" aria-label="Task labels">
						<span class="chip chip-success chip-outline"><span class="chip-label">Analytics</span></span>
					</div>
					<footer class="d-flex flex-column gap-2 mt-1">
						<div class="d-flex align-items-center gap-2">
							<span class="avatar avatar-sm bg-success" aria-hidden="true">JP</span>
							<span class="text-sm">Assigned to Jamie Patel</span>
						</div>
						<div class="d-flex flex-wrap gap-1">
							<button class="btn btn-text btn-primary btn-sm" type="button" data-toast="Connect launch analytics opened">Open task</button>
							<button class="btn btn-outline btn-success btn-sm ms-auto" type="button" data-toast="Connect launch analytics marked complete">Complete</button>
						</div>
					</footer>
				</div>
			</article>
		</div>
	</section>

	<section class="card shadow-sm col-12 col-md-6 col-lg-4 h-100" aria-labelledby="task-board-done">
		<header class="card-header d-flex align-items-center gap-2">
			<h4 class="h5 card-title mb-0" id="task-board-done">Done</h4>
			<span class="badge bg-success ms-auto">1 task</span>
		</header>
		<div class="card-body d-flex flex-column gap-3">
			<article class="card" aria-labelledby="task-assets-title">
				<div class="card-body d-flex flex-column gap-2">
					<header class="d-flex align-items-start gap-2">
						<h5 class="h6 card-title mb-0" id="task-assets-title">Optimize hero assets</h5>
						<span class="badge bg-success ms-auto">Completed</span>
					</header>
					<p class="text-muted mb-0">Compressed responsive images and confirmed performance budgets.</p>
					<div class="d-flex flex-wrap gap-1" aria-label="Task labels">
						<span class="chip chip-primary chip-outline"><span class="chip-label">Performance</span></span>
						<span class="chip chip-secondary chip-outline"><span class="chip-label">Assets</span></span>
					</div>
					<footer class="d-flex flex-column gap-2 mt-1">
						<div class="d-flex align-items-center gap-2">
							<span class="avatar avatar-sm bg-primary" aria-hidden="true">AM</span>
							<span class="text-sm">Completed by Alex Morgan</span>
						</div>
						<div class="d-flex flex-wrap gap-1">
							<button class="btn btn-text btn-primary btn-sm" type="button" data-toast="Optimize hero assets opened">Open task</button>
							<button class="btn btn-outline btn-primary btn-sm ms-auto" type="button" data-toast="Optimize hero assets moved to To do">Reopen</button>
						</div>
					</footer>
				</div>
			</article>
		</div>
	</section>
</div>
</section>