Quarter Planner
Q3 roadmap grid with CSS span bars, capacity hints, and status badges for 8 initiatives across 5 teams.
Q3 roadmap grid with CSS span bars, capacity hints, and status badges for 8 initiatives across 5 teams.
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
Quarter Planner is the Q3 2026 capacity view, 8 initiatives across 5 teams spanning July through September as CSS grid span bars. Each row carries the initiative name, a status badge (Planned, In progress, At risk), the owning team, and a capacity hint below the bar: 2 eng, blocked on spec for the at-risk SAML row, 1 PM + 1 eng for the Mobile iOS discovery. The column grid lines hold the month boundaries without chart lib overhead.
Initiatives are one typed array with startMonth and spanMonths driving the percent-based margin and width. The capacity hint is the difference between a timeline and a plan; without it every span bar prompts a who is on this question.
Reach for this block on the roadmap or planning page, wired to your initiatives endpoint and sprint data. Keep statuses current or the at-risk signal loses its meaning the moment it stops reflecting reality.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the cross-team Q3 capacity grid. Other planner views:
Tip: span bars that bleed across a month boundary are the first thing stakeholders spot; make sure your startMonth and spanMonths data is accurate before presenting.