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.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.
