Jump to main content

Equal heights


Work in progress

Vanilla's patterns are newly released and still evolving as we receive feedback.

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.

4 columns

If the number of items is divisible by 4, the items will be laid out in 4 columns on large screens.

3 columns

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.

Minimal contents

At a minimum, you should provide a title, at least 3 items, and a title and image for each item.

Parameter consistency

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.

Jinja Macro

The vf_equal_heights Jinja macro can be used to generate an equal heights pattern. The API for the macro is shown below.

Parameters

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.

Slots

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

Import

Jinja Macro

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.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.