CounterTiles

tiled metric blocks that pop on dark or accent backdrops.

Live preview

3m

Docs views

161

Countries

0

Build steps

Install

From your site folder, run:

Copyjprot add CounterTiles

That downloads the self-contained component into theme/components/CounterTiles.js,

where it is picked up automatically — the same way as any built-in component.

To remove it later, just delete that file.

Use it as a homepage section

Add an entry to the sections: list in jprot.config.js:

Copysections: [
  { component: 'CounterTiles', title: 'CounterTiles' },
]

Use it inside a page

On its own line in any Markdown file, passing the props:

Copy:::CounterTiles items='[{"value":"3m","label":"Docs views"},{"value":"161","label":"Countries"},{"value":"0","label":"Build steps"}]'

Props

Prop	Type	Note
items	array	[{ value, label }]
tone	string	plain \	accent (solid accent background)

↩ Back to all elements