The tiered list pattern is used to easily implement a list of paired titles and descriptions underneath a top-level title and description. Optional CTA blocks can be placed at various points in the content as well. Depending on the size and composition of your content, you can choose from a variety of tiered list layouts:
The tiered list pattern is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | h2 title text |
| Description | p description text with optional CTA block |
| List item title | Title text/content |
| List item description | Description text/content with optional CTA block |
| Call to action block | CTA block beneath the list |
This variant contains a top-level description which is presented side-by-side with its title on desktop screen sizes.
This variant does not contain a top-level description and its child list is presented with its titles side-by-side with its descriptions on tablet screen sizes.
This variant contains a top-level description and its child list is presented with its titles side-by-side with its descriptions on tablet screen sizes.
This variant contains a top-level description. Its title and description are presented side-by-side on desktop screen sizes, and its child list is presented side-by-side on tablet screen sizes.
This variant does not contain a top-level description, and both its title and child list are presented full-width on desktop and tablet screen sizes respectively.
This variant contains a top-level description, and its title, description, and child list are presented full-width on desktop and tablet screen sizes respectively.
In addition to the CTA block placed below the list, you may also add CTA blocks below the top-level description text, as well as below each list item's description text.
The vf_tiered_list Jinja macro can be used to generate a tiered list pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
is_description_full_width_on_desktop
|
Yes |
boolean
|
true
|
Whether the description element should be full-width on desktop |
is_list_full_width_on_tablet
|
Yes |
boolean
|
true
|
Whether the list element should be full-width on tablet |
| Name | Required? | Description |
|---|---|---|
title
|
Yes | Title sentence displayed at the top of the pattern |
description
|
No | Description paragraph displayed below the title |
list_item_title_[1-25]
|
Yes, at least 1 | Title element of each child list item; max of 25 |
list_item_description_[1-25]
|
Yes, at least 1 | Description element of each child list item; max of 25 |
cta
|
No | Contents of a CTA block at the bottom of the pattern |
To import the Tiered List Jinja macro, copy the following import statement into your Jinja template:
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_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.