Activity Summary Card
Activity card with an inline SVG contribution heatmap, monthly event count, and three recent items.
Activity card with an inline SVG contribution heatmap, monthly event count, and three recent items.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? 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.