Alternating With Charts
Three alternating feature rows pairing copy and checklists with bar, line, and donut chart panels.
Three alternating feature rows pairing copy and checklists with bar, line, and donut chart panels.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Alternating With Charts is a three row feature section under a centered heading and lede. Each row pairs a feature heading, a short paragraph, and a three item checklist with a chart panel, and the panels alternate sides so the page keeps a rhythm as it scrolls. The three panels are deliberately different: a bar chart built from divs, an SVG line chart with an actual and forecast pair, and an SVG donut with two supporting stats beside it.
Each row is one entry in a plain array holding the title, body, bullets, and which panel to render, so reordering or trimming rows is a one line change. The charts are markup only: bar heights are percentages, the line is a points string, and the donut percentage is a strokeDasharray value with a comment showing the math. No charting library, no images, and every token inverts in dark mode.
Reach for this block when you have exactly two or three capabilities that each deserve their own argument and their own evidence. It gives each feature more room than bento-grid or icon-grid-six, and unlike cards-with-mockups the alternating layout keeps a long section from feeling like a list. If your features are better shown as interface than as data, split-with-app-window or accordion-with-preview make the stronger choice.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the measure, forecast, automate story of an analytics platform. Other ways to fill the three rows:
Tip: vary the chart types across rows, three bar charts in a row reads as filler while bars, a line, and a donut read as evidence.