Components / Display & Media / Heatmap
Heatmap beta
A calendar of intensity — the contribution-graph pattern, for activity that has rhythm.
Less More
<figure class="k-hm" role="img" aria-label="Deploy activity over the last 26 weeks, busiest in the most recent month" style="max-width:430px"> <figcaption>Deploys <span>Last 26 weeks · 312 total</span></figcaption> <div class="k-hm-grid"><i class="l1"></i><i class="l0"></i><i class="l2"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l3"></i><i class="l0"></i><i class="l0"></i><i class="l2"></i><i class="l4"></i><i class="l2"></i><i class="l1"></i><i class="l4"></i><i class="l0"></i><i class="l3"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l3"></i><i class="l0"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l2"></i><i class="l1"></i><i class="l1"></i><i class="l2"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l0"></i><i class="l2"></i><i class="l1"></i><i class="l3"></i><i class="l2"></i><i class="l0"></i><i class="l4"></i><i class="l0"></i><i class="l1"></i><i class="l3"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l2"></i><i class="l3"></i><i class="l2"></i><i class="l3"></i><i class="l1"></i><i class="l2"></i><i class="l2"></i><i class="l2"></i><i class="l1"></i><i class="l3"></i><i class="l4"></i><i class="l1"></i><i class="l2"></i><i class="l0"></i><i class="l2"></i><i class="l2"></i><i class="l4"></i><i class="l3"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l3"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l3"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l3"></i><i class="l3"></i><i class="l3"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l3"></i><i class="l4"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l2"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l2"></i><i class="l4"></i><i class="l2"></i><i class="l1"></i><i class="l2"></i><i class="l2"></i><i class="l0"></i><i class="l3"></i><i class="l3"></i><i class="l3"></i><i class="l3"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l2"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l2"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l4"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l0"></i><i class="l0"></i><i class="l4"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l1"></i><i class="l4"></i><i class="l3"></i><i class="l2"></i><i class="l0"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l1"></i><i class="l3"></i><i class="l1"></i><i class="l0"></i><i class="l3"></i><i class="l4"></i><i class="l3"></i><i class="l3"></i><i class="l3"></i><i class="l2"></i><i class="l0"></i><i class="l1"></i><i class="l1"></i><i class="l0"></i><i class="l0"></i><i class="l0"></i></div> <div class="k-hm-leg">Less <i style="background:var(--k-zinc-100)"></i><i style="background:color-mix(in srgb,var(--k-accent) 26%,var(--k-bg))"></i><i style="background:color-mix(in srgb,var(--k-accent) 52%,var(--k-bg))"></i><i style="background:color-mix(in srgb,var(--k-accent) 78%,var(--k-bg))"></i><i style="background:var(--k-accent)"></i> More</div> </figure>
.k-hm{font-family:var(--k-font);text-align:left;margin:0}
.k-hm figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-hm figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-hm-grid{display:grid;overflow-x:auto;max-width:100%;padding-bottom:4px;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px}
.k-hm-grid i{border-radius:3px;display:block}
.k-hm-grid .l0{background:var(--k-zinc-100)}
.k-hm-grid .l1{background:color-mix(in srgb,var(--k-accent) 26%,var(--k-bg))}
.k-hm-grid .l2{background:color-mix(in srgb,var(--k-accent) 52%,var(--k-bg))}
.k-hm-grid .l3{background:color-mix(in srgb,var(--k-accent) 78%,var(--k-bg))}
.k-hm-grid .l4{background:var(--k-accent)}
.k-hm-leg{display:flex;align-items:center;gap:4px;margin-top:11px;font-size:11px;color:var(--k-ink-3)}
.k-hm-leg i{width:11px;height:11px;border-radius:3px;display:block}
Usage
For activity over weeks: deploys, posts, workouts, commits. Five steps of one accent; anything more and the steps stop being comparable.
Accessibility
A chart is a picture of numbers: give the figure role="img" and an aria-label that states the conclusion ("Signups rose from 22 to 71 over the year"), and keep the data available as a table nearby.
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.