Open demo

CSS code

HTML 
<section class="board-col" aria-labelledby="col-progress">
  <h2 id="col-progress">In progress <span class="count"><span class="sr-only">(</span>3<span class="sr-only"> tasks)</span></span></h2>
  <ul class="stack">
    <li><article class="task">
      <ul class="chips" aria-label="Labels"><li style="background:#f59e0b"><span class="sr-only">Content</span></li><li style="background:#3b82f6"><span class="sr-only">Onboarding</span></li></ul>
      <h3><a href="#">Rework the onboarding checklist copy</a></h3>
      <div class="meta">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">4/6</span><span class="sr-only">Checklist 4 of 6 done</span></span>
        <span class="late"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Overdue:</span> 2 days late</span>
        <span class="who"><span class="sr-only">Assigned to Aigars K. and Rosa M.</span><i style="background:#4f46e5" aria-hidden="true">AK</i><i style="background:#0369a1" aria-hidden="true">RM</i></span>
      </div>
    </article></li>
    <li><article class="task">
      <ul class="chips" aria-label="Labels"><li style="background:#a855f7"><span class="sr-only">Accessibility</span></li></ul>
      <h3><a href="#">Audit colour contrast across the dashboard</a></h3>
      <div class="meta">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">9/12</span><span class="sr-only">Checklist 9 of 12 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Due</span> Fri</span>
        <span class="who"><span class="sr-only">Assigned to Tomas P.</span><i style="background:#be123c" aria-hidden="true">TP</i></span>
      </div>
    </article></li>
    <li><article class="task">
      <ul class="chips" aria-label="Labels"><li style="background:#16a34a"><span class="sr-only">Backend</span></li><li style="background:#f59e0b"><span class="sr-only">Content</span></li></ul>
      <h3><a href="#">Ship the CSV export endpoint</a></h3>
      <div class="meta">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">1/8</span><span class="sr-only">Checklist 1 of 8 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Due</span> 4 Sep</span>
        <span class="who"><span class="sr-only">Assigned to Rosa M. and 2 others</span><i style="background:#0369a1" aria-hidden="true">RM</i><i style="background:#64748b" aria-hidden="true">+2</i></span>
      </div>
    </article></li>
  </ul>
</section>
CSS 
/* Kanban column of task cards. Each card title is a stretched link, so the whole card opens the task.
   Label chips, the checklist count, the due date and the assignees all carry visually hidden text,
   because colour bars and initials alone mean nothing to a screen reader. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.board-col{width:310px;max-width:100%}
.board-col h2{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#4b5565;
  margin-bottom:13px;display:flex;align-items:center;gap:8px}
.board-col .count{background:#dfe3ea;color:#475467;font-size:.72rem;padding:1px 8px;border-radius:999px;letter-spacing:0}
.board-col .stack{display:flex;flex-direction:column;gap:11px;list-style:none}
.task{position:relative;padding:14px 15px;background:#fff;border:1px solid #e9ecf1;border-radius:12px;
  transition:box-shadow .18s,transform .18s}
.task:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(16,24,40,.16)}
.task svg{display:block}
.task .chips{display:flex;gap:6px;margin-bottom:10px;list-style:none}
.task .chips li{height:6px;width:34px;border-radius:99px}
.task h3{font-size:.91rem;line-height:1.4;font-weight:600}
.task h3 a{color:inherit;text-decoration:none}
.task h3 a::after{content:"";position:absolute;inset:0}
.task h3 a:focus-visible{outline:2px solid transparent}
.task:has(h3 a:focus-visible){outline:2px solid #4f46e5;outline-offset:2px}
@supports not selector(:has(*)){.task h3 a:focus-visible{outline-color:#4f46e5;outline-offset:2px}}
.task .meta{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:.77rem;color:#667085}
.task .meta > span{display:flex;align-items:center;gap:5px}
.task .meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.task .late{color:#dc2626;font-weight:700}
.task .meta .who{margin-left:auto}
.task .who i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-8px;
  display:grid;place-items:center;font-style:normal;font-size:.63rem;font-weight:800;color:#fff}
.task .who i:first-of-type{margin-left:0}
@media (prefers-reduced-motion:reduce){.task{transition:none}.task:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<section class="board-col" aria-labelledby="col-progress">
  <h2 id="col-progress" class="d-flex align-items-center">In progress <span class="badge rounded-pill count"><span class="visually-hidden">(</span>3<span class="visually-hidden"> tasks)</span></span></h2>
  <ul class="stack list-unstyled d-flex flex-column m-0">
    <li><article class="card task"><div class="card-body">
      <ul class="chips list-unstyled d-flex" aria-label="Labels"><li style="background:#f59e0b"><span class="visually-hidden">Content</span></li><li style="background:#3b82f6"><span class="visually-hidden">Onboarding</span></li></ul>
      <h3 class="card-title"><a href="#" class="stretched-link">Rework the onboarding checklist copy</a></h3>
      <div class="meta d-flex align-items-center">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">4/6</span><span class="visually-hidden">Checklist 4 of 6 done</span></span>
        <span class="late"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="visually-hidden">Overdue:</span> 2 days late</span>
        <span class="who ms-auto"><span class="visually-hidden">Assigned to Aigars K. and Rosa M.</span><i class="rounded-circle" style="background:#4f46e5" aria-hidden="true">AK</i><i class="rounded-circle" style="background:#0369a1" aria-hidden="true">RM</i></span>
      </div>
    </div></article></li>
    <li><article class="card task"><div class="card-body">
      <ul class="chips list-unstyled d-flex" aria-label="Labels"><li style="background:#a855f7"><span class="visually-hidden">Accessibility</span></li></ul>
      <h3 class="card-title"><a href="#" class="stretched-link">Audit colour contrast across the dashboard</a></h3>
      <div class="meta d-flex align-items-center">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">9/12</span><span class="visually-hidden">Checklist 9 of 12 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="visually-hidden">Due</span> Fri</span>
        <span class="who ms-auto"><span class="visually-hidden">Assigned to Tomas P.</span><i class="rounded-circle" style="background:#be123c" aria-hidden="true">TP</i></span>
      </div>
    </div></article></li>
    <li><article class="card task"><div class="card-body">
      <ul class="chips list-unstyled d-flex" aria-label="Labels"><li style="background:#16a34a"><span class="visually-hidden">Backend</span></li><li style="background:#f59e0b"><span class="visually-hidden">Content</span></li></ul>
      <h3 class="card-title"><a href="#" class="stretched-link">Ship the CSV export endpoint</a></h3>
      <div class="meta d-flex align-items-center">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">1/8</span><span class="visually-hidden">Checklist 1 of 8 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="visually-hidden">Due</span> 4 Sep</span>
        <span class="who ms-auto"><span class="visually-hidden">Assigned to Rosa M. and 2 others</span><i class="rounded-circle" style="background:#0369a1" aria-hidden="true">RM</i><i class="rounded-circle" style="background:#64748b" aria-hidden="true">+2</i></span>
      </div>
    </div></article></li>
  </ul>
</section>
CSS 
/* Bootstrap .card + .stretched-link + .badge. Each task title is a stretched link, so the whole card opens
   the task. Label chips, checklist count, due date and assignees carry .visually-hidden text. */
.board-col{width:310px;max-width:100%}
.board-col h2{font-size:.78rem;font-weight:700;line-height:normal;letter-spacing:.09em;text-transform:uppercase;
  color:#4b5565;margin-bottom:13px;gap:8px}
.board-col .count{--bs-badge-font-size:.72rem;--bs-badge-font-weight:700;--bs-badge-color:#475467;--bs-badge-padding-x:8px;
  --bs-badge-padding-y:1px;background:#dfe3ea;letter-spacing:0;line-height:normal}
.board-col .stack{gap:11px}
.task{--bs-card-border-color:#e9ecf1;--bs-card-border-radius:12px;--bs-card-spacer-y:14px;--bs-card-spacer-x:15px;
  transition:box-shadow .18s,transform .18s}
.task:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(16,24,40,.16)}
.task svg{display:block}
.task .chips{gap:6px;margin-bottom:10px}
.task .chips li{height:6px;width:34px;border-radius:99px}
.task .card-title{font-size:.91rem;line-height:1.4;font-weight:600;margin:0}
.task .card-title a{color:inherit;text-decoration:none}
.task .stretched-link:focus-visible{outline:2px solid transparent}
.task:has(.stretched-link:focus-visible){outline:2px solid #4f46e5;outline-offset:2px}
@supports not selector(:has(*)){.task .stretched-link:focus-visible{outline-color:#4f46e5;outline-offset:2px}}
.task .meta{gap:14px;margin-top:12px;font-size:.77rem;color:#667085}
.task .meta > span{display:flex;align-items:center;gap:5px}
.task .meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.task .late{color:#dc2626;font-weight:700}
.task .who i{width:24px;height:24px;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;
  font-style:normal;font-size:.63rem;font-weight:800;color:#fff}
.task .who i:first-of-type{margin-left:0}
@media (prefers-reduced-motion:reduce){.task{transition:none}.task:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<section class="w-[310px] max-w-full" aria-labelledby="col-progress">
  <h2 id="col-progress" class="mb-[13px] flex items-center gap-2 text-[.78rem] font-bold tracking-[.09em] text-[#4b5565] uppercase">In progress <span class="rounded-full bg-[#dfe3ea] px-2 py-px text-[.72rem] tracking-normal text-[#475467]"><span class="sr-only">(</span>3<span class="sr-only"> tasks)</span></span></h2>
  <ul class="flex flex-col gap-[11px]">
    <li><article class="relative rounded-xl border border-[#e9ecf1] bg-white px-[15px] py-3.5 transition-[box-shadow,translate] duration-[180ms] hover:-translate-y-0.5 hover:shadow-[0_18px_36px_-16px_rgba(16,24,40,.16)] has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <ul class="mb-2.5 flex gap-1.5 [&>li]:h-1.5 [&>li]:w-[34px] [&>li]:rounded-full" aria-label="Labels"><li class="bg-[#f59e0b]"><span class="sr-only">Content</span></li><li class="bg-[#3b82f6]"><span class="sr-only">Onboarding</span></li></ul>
      <h3 class="text-[.91rem] leading-[1.4] font-semibold"><a href="#" class="after:absolute after:inset-0 focus-visible:outline-2 focus-visible:outline-transparent">Rework the onboarding checklist copy</a></h3>
      <div class="mt-3 flex items-center gap-3.5 text-[.77rem] text-[#667085] [&>span]:flex [&>span]:items-center [&>span]:gap-[5px] [&_svg]:block [&_svg]:size-3.5 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">4/6</span><span class="sr-only">Checklist 4 of 6 done</span></span>
        <span class="font-bold text-[#dc2626]"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Overdue:</span> 2 days late</span>
        <span class="ml-auto [&>i]:-ml-2 [&>i]:grid [&>i]:size-6 [&>i]:place-items-center [&>i]:rounded-full [&>i]:border-2 [&>i]:border-white [&>i]:text-[.63rem] [&>i]:font-extrabold [&>i]:text-white [&>i]:not-italic [&>i:first-of-type]:ml-0"><span class="sr-only">Assigned to Aigars K. and Rosa M.</span><i class="bg-[#4f46e5]" aria-hidden="true">AK</i><i class="bg-[#0369a1]" aria-hidden="true">RM</i></span>
      </div>
    </article></li>
    <li><article class="relative rounded-xl border border-[#e9ecf1] bg-white px-[15px] py-3.5 transition-[box-shadow,translate] duration-[180ms] hover:-translate-y-0.5 hover:shadow-[0_18px_36px_-16px_rgba(16,24,40,.16)] has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <ul class="mb-2.5 flex gap-1.5 [&>li]:h-1.5 [&>li]:w-[34px] [&>li]:rounded-full" aria-label="Labels"><li class="bg-[#a855f7]"><span class="sr-only">Accessibility</span></li></ul>
      <h3 class="text-[.91rem] leading-[1.4] font-semibold"><a href="#" class="after:absolute after:inset-0 focus-visible:outline-2 focus-visible:outline-transparent">Audit colour contrast across the dashboard</a></h3>
      <div class="mt-3 flex items-center gap-3.5 text-[.77rem] text-[#667085] [&>span]:flex [&>span]:items-center [&>span]:gap-[5px] [&_svg]:block [&_svg]:size-3.5 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">9/12</span><span class="sr-only">Checklist 9 of 12 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Due</span> Fri</span>
        <span class="ml-auto [&>i]:-ml-2 [&>i]:grid [&>i]:size-6 [&>i]:place-items-center [&>i]:rounded-full [&>i]:border-2 [&>i]:border-white [&>i]:text-[.63rem] [&>i]:font-extrabold [&>i]:text-white [&>i]:not-italic [&>i:first-of-type]:ml-0"><span class="sr-only">Assigned to Tomas P.</span><i class="bg-[#be123c]" aria-hidden="true">TP</i></span>
      </div>
    </article></li>
    <li><article class="relative rounded-xl border border-[#e9ecf1] bg-white px-[15px] py-3.5 transition-[box-shadow,translate] duration-[180ms] hover:-translate-y-0.5 hover:shadow-[0_18px_36px_-16px_rgba(16,24,40,.16)] has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
      <ul class="mb-2.5 flex gap-1.5 [&>li]:h-1.5 [&>li]:w-[34px] [&>li]:rounded-full" aria-label="Labels"><li class="bg-[#16a34a]"><span class="sr-only">Backend</span></li><li class="bg-[#f59e0b]"><span class="sr-only">Content</span></li></ul>
      <h3 class="text-[.91rem] leading-[1.4] font-semibold"><a href="#" class="after:absolute after:inset-0 focus-visible:outline-2 focus-visible:outline-transparent">Ship the CSV export endpoint</a></h3>
      <div class="mt-3 flex items-center gap-3.5 text-[.77rem] text-[#667085] [&>span]:flex [&>span]:items-center [&>span]:gap-[5px] [&_svg]:block [&_svg]:size-3.5 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2">
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg><span aria-hidden="true">1/8</span><span class="sr-only">Checklist 1 of 8 done</span></span>
        <span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span class="sr-only">Due</span> 4 Sep</span>
        <span class="ml-auto [&>i]:-ml-2 [&>i]:grid [&>i]:size-6 [&>i]:place-items-center [&>i]:rounded-full [&>i]:border-2 [&>i]:border-white [&>i]:text-[.63rem] [&>i]:font-extrabold [&>i]:text-white [&>i]:not-italic [&>i:first-of-type]:ml-0"><span class="sr-only">Assigned to Rosa M. and 2 others</span><i class="bg-[#0369a1]" aria-hidden="true">RM</i><i class="bg-[#64748b]" aria-hidden="true">+2</i></span>
      </div>
    </article></li>
  </ul>
</section>

About this set

One kanban column, In progress, with a task count and three task cards. Each card shows coloured label chips, the task title, a checklist counter, a due date and overlapping assignee initials; the first card is overdue and shows its due text in bold red with a clock icon. The title is a stretched link, so clicking anywhere on the card opens the task, and the card rises by two pixels on hover. Everything that is only visual carries hidden text for assistive technology: each chip names its label (Content, Onboarding, Accessibility, Backend), the counter reads Checklist 4 of 6 done instead of 4/6, the date is prefixed with Due or Overdue, and the avatars are replaced by Assigned to Aigars K. and Rosa M. The column is a section labelled by its heading, and the cards are list items, so a screen reader announces how many tasks there are. Use it for project boards, sprint views and support queues. The Bootstrap version uses .card, .stretched-link and a pill .badge for the count; the Tailwind version uses arbitrary child selectors for the chips and avatars.

What’s included

  • Label chips, checklist count, due date and assignees
  • Overdue state in bold red with a hidden Overdue prefix
  • Whole card opens the task through a stretched link
  • Hidden text for chips, counts and avatars
  • Column and cards marked up as a labelled section and list

Accessibility

The column heading is an h2 and each task title an h3 holding the card's only link. Chips, the checklist counter, the due date and the avatars all have visually hidden text, and the visual forms are aria-hidden where they would be read twice. Focusing a card link draws a 2px indigo ring around the card. Avatar colours were darkened so the white initials reach 4.5:1, and the hover lift is disabled under reduced motion.

Customise it

Chip colours are inline backgrounds on each chip (bg- classes in Tailwind); keep the hidden label text in step. Avatar colours are set per initial the same way, and the overdue red is #dc2626 on .late.