The rich horizontal 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 horizontal section, which is a list with a horizontal divider between each row of items. The list items can be bulletless, bulleted, ticked, or ordered.
The rich horizontal 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 (required) | A horizontal section list with up to 8 list items. |
| Call to action block | Call to action block beneath the list. |
| Image | Main list visual. |
By default, all the pattern elements are vertically stacked.
The 50/50 layout splits the title, description, and logo section into two columns. This makes use of more horizontal white space, allowing for a more compact layout.
Set the Jinja parameter variant to "50/50" to enable the 50/50 layout.
By default, the list items have no list item icon, and the list is unordered.
The list_item_style Jinja parameter can be set to "bullet", "tick", or "number" to change the list item style.
For example, to create a ticked list, set list_item_style="tick".
You can create an ordered list by setting list_item_style="number".
The only mandatory elements in the rich horizontal list are the title and the list, and one of the other (optional) elements.
The vf_rich_horizontal_list Jinja macro can be used to generate a rich horizontal 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 horizontal list. |
list_item_style
|
No |
One of:'bullet','tick','number'
|
N/A
|
Type of list item styling. |
layout
|
No |
One of:'full-width','50/50'
|
"full-width"
|
Layout variant selection |
| Name | Required? | Description |
|---|---|---|
description
|
No | Paragraph-style description of the list. |
logo_section_items
|
No |
A block of 4-8 .p-logo-section__item elements.
|
list_item_[1-8]
|
Yes, at least 4 items |
Contents of a .p-list__item element for the list item.
|
cta
|
No | A call to action (such as links or sign-up buttons) to display beneath the list. |
image
|
No | Main list visual. |
To import the Rich Horizontal List Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_rich-horizontal-list.jinja" import vf_rich_horizontal_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.