A Text Spotlight is a prominent section typically used to quickly capture user's attention to specific action items / benefits or advantages of selecting a specific product.
The Text Spotlight pattern is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | Title text (to be placed in h2 heading) |
| List (required) | A list of paragraphs separated with horizontal rules (minimum 2, maximum 7) |
You can pass text items in the list. By default, h2 level styles are applied to list items.
You can also pass links as text items in the list
You can also apply h4 level styles to the list items, by setting item_heading_level=4
The vf_text-spotlight Jinja macro can be used to generate a Text Spolight Pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
Yes |
string
|
N/A
|
h2 title text
|
list_items
|
Yes |
Array<string>
|
[]
|
An array of text or HTML strings |
item_heading_level
|
No |
One of:2,4
|
2
|
Heading level to apply to list items
|
To import the Text Spotlight Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_text-spotlight.jinja" import vf_text_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.