Grouped Bar Comparison

About this block

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.

When to use

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

• Features so each bar maps to a capability already shown

After

• Case Studies to attach a named customer to the deltas
• Pricing once superiority is established

What you can display

One strong use is throughput and speed against a stack of point tools. Other bar worthy dimensions:

• Cost lines. Subscription, implementation, and headcount cost side by side, with shorter is better notes.
• Performance. Send speed, report freshness, and uptime against a legacy suite.
• Coverage. Channels, integrations, and locales supported, where longer simply wins.

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.