Data Visualization module

Statistics Cards block

Key numbers as cards — each with a label, a count-up value, a trend badge and an optional sparkline.

Overview

Statistics Cards present your KPIs like a dashboard: each card has a label, a big number (with prefix/suffix, counting up when it appears), a coloured trend badge (“+12.4%”) and an optional mini line chart (sparkline). Trends are coloured green when they go the good way and red when they do not — you decide whether “up” is good (revenue) or bad (costs).

At a glance

Block name: wpbb/stat-cards
Module: Data Visualization
Find it by searching: Statistics Cards
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Results sections on landing pages.
Report summaries.
Investor or impact pages.

Example scenarios

SaaS homepage: four cards — Revenue $48,250 (+12.4%, up), Customers, Churn (−0.8%, down, good when down), NPS.

See it in action

These are live examples: real Statistics Cards blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

KPI cards with trends and sparklines

Open in a new tab

How to add the Statistics Cards block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Statistics Cards in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Statistics Cards in the results. The block appears with four sample cards.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Cards

One entry per card; Add card adds another (up to 24).

Label

What it does: What the number measures.
What to enter or choose: Short text.
Default: 4 sample items
How to use it: Each item is a collapsible row. Click it to open its fields; use the arrows to reorder, the bin to delete and “Add” to create a new one.
When to use it: Always.
Example: “Revenue”.
Result: Shown above the value.

Before

What it does: Text before the value.
What to enter or choose: Short text.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Currencies.
Example: “$”.
Result: “$48,250”.

Value

What it does: The number.
What to enter or choose: A number (decimals allowed).
How to use it: Type a number, or use the arrows in the field.
When to use it: Always.
Example: 48250.
Result: Formatted with thousands separators.

After

What it does: Text after the value.
What to enter or choose: Short text.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Units.
Example: “%”.
Result: “98%”.

Change

What it does: The trend badge text.
What to enter or choose: Optional, e.g. “+12% vs last month”.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: To show movement.
Example: “+12.4%”.
Result: A badge under the value.

Trend

What it does: Direction of the change.
What to enter or choose: One of: None, Up, Down.
How to use it: Click one of the buttons in the group.
When to use it: With a Change.
Example: Up.
Result: An arrow; screen readers hear “Up” or “Down”.

Good when

What it does: Which direction is positive.
What to enter or choose: One of: Up, Down.
How to use it: Click one of the buttons in the group.
When to use it: With a Trend.
Example: Down for costs or churn.
Result: Green badge when the trend matches, red when not.

Icon

What it does: An icon on the card.
What to enter or choose: An icon, or None.
How to use it: Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it: With Icons on.
Example: “dollar-sign”.
Result: Shown in the card corner.

Sparkline values

What it does: Numbers for the mini chart.
What to enter or choose: Optional: a few numbers separated by commas.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: To show the trend shape.
Example: 12, 15, 14, 19, 22.
Result: A small line chart at the bottom of the card.

Settings panel: Layout

Columns (desktop)Desktop

What it does: Cards per row.
What to enter or choose: A number from 1 to 6.
Default: 4
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 4.
Result: —

Columns (tablet)Tablet

What it does: Cards per row below 1024px.
What to enter or choose: A number from 1 to 4.
Default: 2
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 2.
Result: —

Columns (mobile)Mobile

What it does: Cards per row below 600px.
What to enter or choose: A number from 1 to 2.
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 1.
Result: —

Style

What it does: The card look.
What to enter or choose: One of: Card, Tinted, Plain.
Default: Card
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Tinted.
Result: Background and border change.

Icons

What it does: Shows the card icons.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On.
Result: Icons appear or hide.

Sparklines

What it does: Shows the mini charts.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On.
Result: Sparklines appear or hide.

Count up when scrolled into view

What it does: Values count up from zero when the cards appear.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on; off for dashboards that refresh often.
Example: On.
Result: Skipped for visitors who prefer reduced motion.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Statistics Cards offers.

Element: Card selected first

Each card. Hover state.

Styles-tab controls for “Card”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Value

The big numbers.

Styles-tab controls for “Value”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Label

The labels.

Styles-tab controls for “Label”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Icon

The icons.

Styles-tab controls for “Icon”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

Server-rendered; the final values are in the HTML. A small script runs the count-up.

Accessibility

Screen readers read the full value once (not the animation) and the trend direction.
Colour is not the only signal: trends also have arrows and text.

Limitations and notes

Up to 24 cards; sparklines use up to 60 values.