Grouped Bar Comparison
Four dimensions compared as paired horizontal bars for Acme and a typical alternative.
Four dimensions compared as paired horizontal bars for Acme and a typical alternative.
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
Grouped Bar Comparison turns a competitive claim into a chart. Under a left aligned heading and lede, a legend names the two contenders, then four dimensions each show a pair of horizontal bars, Acme in primary and the alternative in muted, with the value printed at the end of each bar. Where shorter is the win, a small note says so, which lets time based dimensions sit beside volume based ones honestly.
The dimensions are one array holding the label, optional note, and a value and width pair per side, so the chart rescales by editing numbers. Bars are plain divs with percentage widths, no SVG or charting library, and the muted versus primary palette keeps the contrast working in both themes without resorting to red and green.
Reach for this block when your advantages are quantifiable but live on different scales. It reads faster than competitor-table because length does the arguing before anyone reads a number, and it carries more information than us-vs-them-split. Pick feature-checklist-table when the comparison is about having versus lacking rather than more versus less.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is throughput and speed against a stack of point tools. Other bar worthy dimensions:
Tip: alternate at least one shorter is better dimension into the list, a chart where your bar always stretches longest starts to read as marketing rather than measurement.