Search blocks by description or jump to a page.
Activity card with an inline SVG contribution heatmap, monthly event count, and three recent items.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Activity Summary Card shows Riley Parker at a glance: name, email, and a 142 events this month badge at the top, then a Contributions heatmap of the last 16 weeks built as an inline SVG grid of 112 cells (16 columns by 7 rows) where each rect uses a fill-foreground class with one of five opacity tiers. Below the heatmap three recent items appear as ruled rows: Merged PR #482 in design-system 2 hours ago, Commented on FIG-1091 in figma-handoff, and Pushed 3 commits to tokens-v2.
The heatmap is pure SVG with theme-token opacity so it adapts to dark mode without a chart dependency. recentItems is a typed const array so adding a fourth event type (code review, deployment) takes one entry.
Reach for this block on a user profile page below the profile header, wired to your activity and contribution endpoints. Derive opacity level from contribution count quartiles so the gradient remains meaningful as volume grows.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal contribution summary on an internal profile. Other activity shapes:
Tip: five opacity tiers is the most the eye resolves reliably in a small cell grid; adding a sixth tier reads as noise.