Tailwind CSS Kanban Group Headings Blocks

All Blocks
Application UI
Productivity
Kanban Group Headings

Kanban Group Headings

Kanban group heading components for board columns, workflow stages, and compact status headers.

CRM Pipeline Group Heading with Status Dot and Menu Pro

Pipeline column heading combines stage title, item count, status dot, and an overflow menu for color selection.

<div class="pe-5 w-full inline-flex justify-between items-center gap-x-2">
                    <div class="inline-flex items-center gap-x-1.5">
                      <div class="flex items-center gap-x-1.5 ps-3 rounded-md">
                        <span class="size-2 bg-surface-3 rounded-full"></span>
                        <span class="font-medium text-sm text-foreground">
                          Prospecting
                        </span>
                      </div>
                      <span class="flex shrink-0 justify-center items-center size-4 bg-surface-1 text-muted-foreground-2 text-[13px] leading-3 rounded-sm">
                        1
                      </span>
                    </div>

<div class="flex items-center gap-x-1">
                      
                      <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                        <button id="hs-pro-wpghmd1" type="button" class="flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                          <span class="sr-only">More</span>
                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpghmd1">
                          <div class="p-1 border-b border-dropdown-divider">
                            <input type="text" class="py-1 sm:py-1.5 px-3 block w-full bg-surface border-transparent text-surface-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:bg-layer focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" value="Prospecting">
                          </div>

<div class="p-1 border-b border-dropdown-divider">
                            <fieldset class="relative">
                              <legend class="sr-only">
                                Colors
                              </legend>

<label for="hs-pro-wpghmdcidRed1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-red-500 border-0 rounded-full appearance-none checked:bg-none checked:text-red-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidRed1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Red</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>

<label for="hs-pro-wpghmdcidOrange1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-orange-500 border-0 rounded-full appearance-none checked:bg-none checked:text-orange-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidOrange1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Orange</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>

<label for="hs-pro-wpghmdcidYellow1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-yellow-500 border-0 rounded-full appearance-none checked:bg-none checked:text-yellow-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidYellow1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Yellow</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>

<label for="hs-pro-wpghmdcidTeal1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-teal-500 border-0 rounded-full appearance-none checked:bg-none checked:text-teal-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidTeal1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Teal</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>

<label for="hs-pro-wpghmdcidIndigo1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-indigo-500 border-0 rounded-full appearance-none checked:bg-none checked:text-indigo-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidIndigo1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Indigo</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>

<label for="hs-pro-wpghmdcSky1" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="w-1 h-3 bg-sky-500 border-0 rounded-full appearance-none checked:bg-none checked:text-sky-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcSky1" name="hs-pro-wpghmdcn1" >
                                  <span class="ms-2 text-sm text-foreground">Sky</span>
                                  <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                </label>
                                
                              </div>
                            </fieldset>
                          </div>

<div class="p-1 space-y-0.5">
                            <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" href="#">
                              <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                              Hide group
                            </a>
                            <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-red-500 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" href="#">
                              <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                              Delete group
                            </a>
                          </div>
                        </div>
                        
                      </div>

<div class="hs-tooltip inline-block">
                        <button type="button" class="hs-tooltip-toggle relative flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-chhtgm">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                          <span class="sr-only">New</span>
                        </button>
                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                          Create new list
                        </span>
                      </div>
                      
                    </div>
                    
                  </div>

Open related CRM tasks template

Admin Kanban Group Heading with Status Dot and Color Menu Pro

Board column heading combines a status label, item count, status dot, and a dropdown menu for color selection.

<div class="pe-7 w-full inline-flex justify-between items-center gap-x-2">
                      <div class="inline-flex items-center gap-x-2">
                        
                        <div class="hs-dropdown [--auto-close:inside] relative inline-flex">
                          <button id="hs-pro-dpghmd1" type="button" class="flex items-center gap-x-1.5 py-px px-2 bg-surface-1 rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                            <span class="w-1 h-3 bg-surface-3 rounded-full"></span>
                            <span class="font-medium text-[13px] text-foreground">
                              No status
                            </span>
                            <span class="sr-only">No status</span>
                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dpghmd1">
                            <div class="p-1">
                              <input type="text" class="py-1 sm:py-1.5 px-3 block w-full bg-transparent border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-primary-hover focus:ring-primary-hover focus:bg-layer disabled:opacity-50 disabled:pointer-events-none" value="No status">
                            </div>

<div class="py-3 px-4 border-b border-dropdown-divider">
                              <fieldset>
                                <legend class="mb-2 text-xs text-muted-foreground">
                                  Colors
                                </legend>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-red-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcidRed1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcidRed1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Red</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Red
                                      </span>
                                    </label>
                                  </div>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-orange-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcOrange1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcOrange1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Orange</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Orange
                                      </span>
                                    </label>
                                  </div>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-yellow-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcYellow1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcYellow1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Yellow</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Yellow
                                      </span>
                                    </label>
                                  </div>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-green-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcGreen1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcGreen1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Green</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Green
                                      </span>
                                    </label>
                                  </div>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-indigo-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcIndigo1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcIndigo1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Indigo</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Indigo
                                      </span>
                                    </label>
                                  </div>

<div class="hs-tooltip group inline-flex shrink-0 justify-center items-center size-4 cursor-pointer rounded-full bg-sky-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="hidden" id="hs-pro-dpghmdcSky1" name="hs-pro-dpghmdcn1" >
                                    <label for="hs-pro-dpghmdcSky1" class="hs-tooltip-toggle relative">
                                      <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                      <span class="sr-only">Sky</span>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Sky
                                      </span>
                                    </label>
                                  </div>
                                  
                                </div>
                              </fieldset>
                            </div>

<div class="p-1 space-y-0.5">
                              <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                                Hide group
                              </a>
                              <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-destructive hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                Delete group
                              </a>
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="flex items-center gap-x-2">
                        <span class="text-[13px] text-muted-foreground leading-3">
                          1
                        </span>

<div class="hs-tooltip inline-block">
                          <button type="button" class="hs-tooltip-toggle relative flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-chhtgm">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                            <span class="sr-only">New</span>
                          </button>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                            Create new task
                          </span>
                        </div>
                        
                      </div>
                      
                    </div>

Workspace Kanban Group Heading with Status Dot and Menu Pro

Board column heading combines a stage label, item count, status dot, and an overflow menu inside a taller workspace header.

<div class="pe-5 w-full inline-flex justify-between items-center gap-x-2">
                      <div class="inline-flex items-center gap-x-3">
                        <div class="flex items-center gap-x-1.5 py-px px-2 bg-surface rounded-md">
                          <span class="w-1 h-3 bg-sky-500 rounded-full"></span>
                          <span class="font-medium text-[13px] text-foreground">
                            Active
                          </span>
                        </div>
                        <span class="text-[13px] text-muted-foreground leading-3">
                          3
                        </span>
                      </div>

<div class="flex items-center gap-x-2">
                        
                        <div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                          <button id="hs-pro-wpghmd2" type="button" class="flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                            <span class="sr-only">More</span>
                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpghmd2">
                            <div class="p-1 border-b border-dropdown-divider">
                              <input type="text" class="py-1 sm:py-1.5 px-3 block w-full bg-surface border-transparent text-surface-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm focus:bg-layer focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" value="Active">
                            </div>

<div class="p-1 border-b border-dropdown-divider">
                              <fieldset class="relative">
                                <legend class="sr-only">
                                  Colors
                                </legend>

<label for="hs-pro-wpghmdcidRed2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-red-500 border-0 rounded-full appearance-none checked:bg-none checked:text-red-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidRed2" name="hs-pro-wpghmdcn2" >
                                    <span class="ms-2 text-sm text-foreground">Red</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>

<label for="hs-pro-wpghmdcidOrange2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-orange-500 border-0 rounded-full appearance-none checked:bg-none checked:text-orange-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidOrange2" name="hs-pro-wpghmdcn2" >
                                    <span class="ms-2 text-sm text-foreground">Orange</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>

<label for="hs-pro-wpghmdcidYellow2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-yellow-500 border-0 rounded-full appearance-none checked:bg-none checked:text-yellow-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidYellow2" name="hs-pro-wpghmdcn2" >
                                    <span class="ms-2 text-sm text-foreground">Yellow</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>

<label for="hs-pro-wpghmdcidTeal2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-teal-500 border-0 rounded-full appearance-none checked:bg-none checked:text-teal-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidTeal2" name="hs-pro-wpghmdcn2" >
                                    <span class="ms-2 text-sm text-foreground">Teal</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>

<label for="hs-pro-wpghmdcidIndigo2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-indigo-500 border-0 rounded-full appearance-none checked:bg-none checked:text-indigo-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidIndigo2" name="hs-pro-wpghmdcn2" >
                                    <span class="ms-2 text-sm text-foreground">Indigo</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>

<label for="hs-pro-wpghmdcidSky2" class="group py-1 px-3 flex items-center cursor-pointer rounded-md has-checked:bg-dropdown-item-checked hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                    <input type="radio" class="w-1 h-3 bg-sky-500 border-0 rounded-full appearance-none checked:bg-none checked:text-sky-500 focus:bg-none focus:ring-0 focus:ring-offset-0" id="hs-pro-wpghmdcidSky2" name="hs-pro-wpghmdcn2" checked>
                                    <span class="ms-2 text-sm text-foreground">Sky</span>
                                    <svg class="ms-auto group-has-checked:opacity-100 opacity-0 shrink-0 size-3 cursor-pointer text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  </label>
                                  
                                </div>
                              </fieldset>
                            </div>

<div class="p-1 space-y-0.5">
                              <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" href="#">
                                <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                                Hide group
                              </a>
                              <a class="w-full flex gap-x-3 py-1.5 px-3 rounded-lg text-sm text-red-500 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" href="#">
                                <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                Delete group
                              </a>
                            </div>
                          </div>
                          
                        </div>

<div class="hs-tooltip inline-block">
                          <button type="button" class="hs-tooltip-toggle relative flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-chhtgm">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                            <span class="sr-only">New</span>
                          </button>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                            Create new task
                          </span>
                        </div>
                        
                      </div>
                      
                    </div>

Ecommerce Kanban Group Heading with Item Count Pro

Compact board heading aligns a stage label with a simple item count for order workflow columns.

<div class="py-1 ps-2.5 pe-1 w-full inline-flex justify-between items-center gap-x-2">
                      <div class="inline-flex items-center gap-x-1">
                        <span class="font-medium text-[13px] text-foreground">
                          Arrived
                        </span>
                        <span class="text-[13px] text-muted-foreground leading-3">
                          / 0
                        </span>
                      </div>

<div class="hs-tooltip inline-block">
                        <button type="button" class="hs-tooltip-toggle relative flex justify-center items-center gap-x-3 size-5 text-sm text-muted-foreground hover:bg-surface-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-overlay="#hs-pro-chhtgm">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                          <span class="sr-only">New</span>
                        </button>
                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                          Create new task
                        </span>
                      </div>
                      
                    </div>

Open related purchase orders template