Skip to content

KPI tiles

Use a kpis block to arrange summary figures in columns. Each kpi contains a value and optional label, description, and sentiment colour.

AI-assisted, human-approvednovem uses AI to review and keep our documentation up to date.

Available in: documents and e-mails.

{{ kpis cols: 3 }}
{{ kpi label: "Portfolio value", value: "EUR 8M" }}
{{ kpi label: "Quarter", value: "+3%", sentiment: auto }}
{{ kpi label: "Since inception", value: "+25%", desc: "since 2021-01-01" }}
{{ /kpis }}

Overview

kpis contains one or more kpi tiles. In the example above, cols: 3 places the three figures in equal-width columns. Each tile has a label and a value; the last also has a description below the value.

A kpi has no closing tag. value is its only required key. In documents, the group stays on one page when it fits. Colours and spacing come from the document or e-mail theme.

The kpis row

keyword: cols
options: 1 to 12 in documents; 1 to 4 in e-mails
default: automatic in documents; 1 in e-mails

Set cols to choose the number of equal-width columns. Additional tiles continue on the next row.

In documents, omitting cols fits as many columns as the available width allows. In e-mails, omitting it gives one column, and values greater than four are limited to four columns.

The kpi tile

keyword: value
options: text

The figure to display, including any unit, such as EUR 8M, +5%, or Year 3 of 10. Quote values that contain commas or colons. The value is literal text; variable references are not resolved inside it.

keyword: label
options: text

A short label identifying the figure. Its position depends on the theme.

keyword: desc
options: text

A smaller line below the value, for example the reporting period or a comparison with the previous period.

keyword: sentiment
options: good | bad | auto

good and bad apply the theme's positive and negative status colours. Use them when the meaning of a figure depends on context: a reduction in costs, for example, may be favourable despite being a negative number.

In documents, auto reads the sign of the first figure in value. Positive values are good, negative values are bad, and zero or nonnumeric values are neutral. Accounting parentheses such as (1.2) and the minus sign in −0.5 are recognised.

In e-mails, auto marks values beginning with - or − as bad and other values as good. Use explicit good or bad when sharing values with accounting parentheses between documents and e-mails.

keyword: variant
options: card

In documents, the default tile has an accent bar; variant: card gives it a tinted background. Document themes control the colours and corner radius. In e-mails, the card variant adds a border.

Updating values

Update the value in the document or e-mail content when the figure changes. To display a value fetched from a plot, use an inline variable in a paragraph instead.

Examples

A summary strip with mixed sentiment

This example separates the opening value, deposits, and investment return. Only the return figures have sentiment colours; the other tiles use the default style.

{{ kpis cols: 4 }}
{{ kpi label: "Initial value", value: "EUR 8M" }}
{{ kpi label: "Deposits", value: "EUR 100k" }}
{{ kpi label: "Profit / loss", value: "+EUR 400k", sentiment: auto }}
{{ kpi label: "IRR", value: "+5%", sentiment: good, desc: "since inception" }}
{{ /kpis }}

Cards in a sidebar column

In a document, the commentary below occupies two thirds of the row and the figures occupy one third. cols: 1 stacks the two tiles within the sidebar. E-mails place the col blocks one below the other.

{{ cols }}
{{ col width: 2/3 }}
The fund has called EUR 3M of its EUR 4M commitment. The remaining
EUR 1M is available for future investments.
{{ /col }}
{{ col width: 1/3 }}
{{ kpis cols: 1 }}
{{ kpi label: "Called", value: "EUR 3M", variant: card }}
{{ kpi label: "Not yet called", value: "EUR 1M", variant: card }}
{{ /kpis }}
{{ /col }}
{{ /cols }}

Theming

For custom document styles, select the row with .novem--doc--kpis and individual tiles with .novem--doc--kpi. The Document theme reference lists the --novem-kpi-* variables for tile colours and spacing.

Next
Visualisation