Jump to main content

Tiered list


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

50/50 on desktop with description

This variant contains a top-level description which is presented side-by-side with its title on desktop screen sizes.

50/50 on tablet without description

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.

50/50 on tablet with description

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.

50/50 with description

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.

Full-width without description

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.

Full-width with description

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.

Additional CTA options

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.

Jinja Macro New

The vf_tiered_list Jinja macro can be used to generate a tiered list pattern. The API for the macro is shown below.

Parameters

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

Slots

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

Import Updated

Jinja Macro

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.