The data spotlight is a pattern where key statistics serve as the main content, supported by short headlines and optional descriptions.
It is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | Main heading text (h2) |
| Blocks (required) | Array of data spotlight blocks |
The title can be made clickable by providing link attributes.
You can pass an array of data spotlight block objects to this pattern.
{
"stat": "text" (required),
"headline": "text" (optional),
"description": "text" (optional),
"link": {
"url": "link-url",
"text": "link-text"
} (optional)
}
Depending on the number of data spotlight blocks provided, there are 3 variants of this pattern.
The vf_data_spotlight Jinja macro can be used to generate a Data spotlight pattern. The API for the macro is shown
below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title
|
Yes |
Object
|
N/A
|
Title configuration object with text and optional link_attrs
|
title.text
|
Yes |
string
|
N/A
|
The main title text (rendered as h2)
|
title.link_attrs
|
No |
Object
|
N/A
|
Attributes of an anchor element, as a dictionary. See attribute forwarding docs for more info. |
blocks
|
Yes |
Array<Object>
|
[]
|
Array of blocks to display in the section. See Data Spotlight Blocks for configuration details. |
To import the Data Spotlight Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_data-spotlight.jinja" import vf_data_spotlight %}
View the building with Jinja macros guide for macro installation instructions.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.