Stats

A dark band of up to four key figures with their labels, optionally over a photograph behind a forced overlay.

References: 30k+
Specialised sales reps: 300
Repair service: 1

import { StatsBlock } from "mako-ui/blocks/stats";

export default function Particle() {
  return (
    <StatsBlock
      stats={[
        { value: "30k+", label: "References" },
        { value: "300", label: "Specialised sales reps" },
        { value: "1", label: "Repair service" },
      ]}
    />
  );
}

Props

StatsBlock

Prop	Type	Default	Description
`stats`	`StatsBlockItem[]`	—	The figures. At most four are rendered; the block renders nothing when empty.
`imageUrl`	`string`	—	Optional background photograph, always behind the forced dark overlay so contrast holds whatever the image.
`isPriority`	`boolean`	`false`	For a block above the fold: loads the background eagerly at high priority instead of lazily.
`title`	`string`	—	Optional section heading, rendered as an `h2`.
`subtitle`	`string`	—	Optional line under the heading.
`id`	`string`	—	Id of the section, and the prefix every element id inside is derived from.

StatsBlockItem

Prop	Type	Default	Description
`value`	`string`	—	The figure, as text — `"300"`, `"30k+"`, `"98 %"`.
`label`	`string`	—	What the value counts.

Examples

With a background photograph

The overlay's lightest stop keeps the figures readable whatever image sits underneath.

Rubix in figures

References: 30k+
Specialised sales reps: 300
Orders shipped on time: 98 %
Repair service: 1

import { StatsBlock } from "mako-ui/blocks/stats";

export default function Particle() {
  return (
    <StatsBlock
      imageUrl="/images/machining-1600x500.jpg"
      stats={[
        { value: "30k+", label: "References" },
        { value: "300", label: "Specialised sales reps" },
        { value: "98 %", label: "Orders shipped on time" },
        { value: "1", label: "Repair service" },
      ]}
      title="Rubix in figures"
    />
  );
}

On This Page

Props StatsBlock StatsBlockItem Examples With a background photograph