The rich vertical list is used to display a list alongside a title, logo section, image, and call-to-action block.
The list inside the rich list is a divided list, which is a list with a horizontal divider between each item. The list items can be bulletless, bulleted, ticked, or ordered.
By default, text is on the left and the image is on the right.
The vertical rich list pattern is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | H2 title text. |
| Logo section | A logo section component. |
| Description | p description text. |
| List | A divided list with up to 7 list items. |
| Call to action block | Call to action block beneath the description. |
| Image (required) | Main list visual. |
The horizontal ordering of the rich list columns can also be reversed, creating a flipped layout.
The only mandatory elements in the rich vertical list are the title and the image, and one of the other (optional) elements.
The vf_rich_vertical_list Jinja macro can be used to generate a rich vertical list pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
Yes |
string
|
N/A
|
Title of the rich vertical list. |
list_item_tick_style
|
No |
One of:'bullet','tick','number'
|
N/A
|
Type of list item tick styling. |
is_flipped
|
No |
boolean
|
false
|
Whether the list items are flipped so the image is on the left and the text is on the right. |
| Name | Required? | Description |
|---|---|---|
description
|
No | Paragraph-style description of the list. |
logo_section
|
No | A logo section component. |
list_item_[1-7]
|
No | A divided list item. |
cta
|
No | Contents of a CTA block to display beneath the list. |
image
|
Yes | Main list visual. |
To import the Hero Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %}
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.