The equal heights pattern is used to display rich content about multiple items in a grid layout.
The equal heights pattern is composed of the following elements:
| Element | Description |
|---|---|
| title_text (required) | H2 title text. |
| subtitle_text | H4 or H5 subtitle text, depending on subtitle_heading_level. |
| subtitle_heading_level | Heading level of the subtitles. May be 4 or 5. Defaults to 5. |
| image_aspect_ratio_small | The aspect ratio to apply to item images on small screens. Can be any of the image container aspect ratio identifiers. Defaults to "square". |
| image_aspect_ratio_medium | The aspect ratio to apply to item images on medium screens. Can be any of the image container aspect ratio identifiers. Defaults to "square". |
| image_aspect_ratio_large | The aspect ratio to apply to item images on large screens. Can be any of the image container aspect ratio identifiers. Defaults to "2-3". |
| items (required) | An Array<Object> of individual item properties. |
| items[].title_text (required) | The title for the item. |
| items[].description_html | The description for the item. |
| items[].image_html | The image element for the item. |
| items[].cta_html | The call to action element for the item. |
If the number of items is divisible by 4, the items will be laid out in 4 columns on large screens.
If the number of items is evenly divisible by 3, but not evenly divisible by 4 (for example, 6 items), the items will be laid out in 3 columns on large screens.
At a minimum, you should provide a title, at least 3 items, and a title and image for each item.
The presence of an element in one of the items establishes a visual rhythm that should be upheld by the other items.
For optimal visual consistency, the properties of the individual items should be consistent in each invocation
of the pattern. For example, if one item has a description_html property, all items should have a description_html property.
In the following example, the second and fourth items are missing descriptions, and the third and fourth items are missing CTAs. This demonstrates what not to do with this pattern.
The vf_equal_heights Jinja macro can be used to generate an equal heights pattern. The API for the macro is
shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
Yes | String | N/A |
H2 title text.
|
subtitle_text
|
No | String | N/A |
H4 or H5 subtitle text, depending on subtitle_heading_level.
|
subtitle_heading_level
|
No |
One of:4,5
|
5
|
Heading level of the subtitles. May be 4 or 5.
|
image_aspect_ratio_small
|
No | String |
square
|
The aspect ratio to apply to item images on small screens. Can be any of the image container aspect ratio identifiers. |
image_aspect_ratio_medium
|
No | String |
square
|
The aspect ratio to apply to item images on medium screens. Can be any of the image container aspect ratio identifiers. |
image_aspect_ratio_large
|
No | String |
2-3
|
The aspect ratio to apply to item images on large screens. Can be any of the image container aspect ratio identifiers. |
items
|
Yes | Array<Object> | N/A |
An Array<Object> of individual item properties.
|
items[].title_text
|
Yes | String | N/A | The title for the item. |
items[].description_html
|
No | String | N/A | The description for the item. |
items[].image_html
|
No | String | N/A | The image element for the item. |
items[].cta_html
|
No | String | N/A | The call to action element for the item. |
| Name | Required? | Description |
|---|---|---|
description
|
No | Paragraph-style content below the title and subtitle |
cta
|
Yes | Contents of a CTA block beneath the title and description |
To import the Linked Logo section Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_equal-heights.jinja" import vf_equal_heights %}
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.