Email: key figure

A key figure is a void element: a large value in the brand colour, a small uppercase label, and an optional line of description. It holds one figure; a row of three is three figures in columns.

Setting it up

createEmailFeatures() includes it. To add it to another list of features:

import { createContentFeatures, statFeature } from "@voila.dev/ui/content-editor";
 
const features = [...createContentFeatures(), statFeature];

Key figure in the slash menu or the insert menu adds one and selects it.

Fields

An empty value or label shows its placeholder faded on the canvas. An empty description takes no room, on the canvas as in the email.

The stored node

{
	"type": "stat",
	"value": "128",
	"label": "Projects delivered",
	"description": "Since 2019.",
	"align": "center",
	"children": [{ "text": "" }]
}

The web reader writes a <div class="stat"> holding stat-value, stat-label and, when there is one, stat-description. statReader is the reader alone.

The email block editor's stat block maps field for field.

Labels

The item is items.stat. The fields are fields.statValue, fields.statLabel, fields.statDescription and fields.align; the placeholders are fields.statValuePlaceholder and fields.statLabelPlaceholder.