The Pricing block pattern is used to display individual cards representing different tiers of pricing and their associated offerings, positioned below a title and a description of the product. It uses the 4-4-8 grid pattern with subgrid, to retain alignment between rows. There are three variations of the block layout, depending on the number of cards displayed, ranging from two to four:
The Pricing block pattern is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | h2 title text |
| Description | p description text |
| Tiers (required) | An Array<Object> of individual tiers representing different pricing options |
| Tiers[].Name (required) | h2 tier title |
| Tiers[].Price (required) | The price of the tier |
| Tiers[].Price explanation (required) | The timeframe/coverage for the pricing tier |
| Tier[].Description | Descriptive text for the pricing tier |
| Tier[].List label (required) | A header for the list of offerings |
| Tier[].Tier offerings (required) | An Array<Object> of what is offered in this tier |
| Tier[].Tier offerings[].List item style | The style of the list item |
| Tier[].Tier offerings[].List item content (required) | The list item content |
| Call to action | Call to action block beneath the list |
The cards are evenly spread across the available space, with any gaps in content not affecting the alignment of the grid.
With 3 tier blocks, a 25-75 split will be used on large screens.
With two tier blocks, they will take all the available space.
The vf_pricing_block Jinja macro can be used to generate a pricing tier comparison. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
Yes |
string
|
N/A
|
Title of the pricing section. |
tiers
|
Yes |
Array<Object>
|
N/A
|
A list of offerings included in this tier. |
tiers[].tier_name_text
|
Yes |
string
|
N/A
|
Title for the pricing tier. |
tiers[].tier_price_text
|
Yes |
string
|
N/A
|
The pricing of a given tier |
tiers[].tier_price_explanation
|
Yes |
string
|
N/A
|
The timeframe/coverage for the pricing tier. |
tiers[].tier_description_html
|
No |
string
|
N/A
|
A description of the pricing tier. |
tiers[].tier_label_text
|
Yes |
string
|
N/A
|
A header for the offerings list. |
tiers[].tier_offerings
|
Yes |
Array<Object>
|
N/A
|
A list of the pricing tier's offerings. |
tiers[].tier_offerings[].list_item_style
|
No |
One of: 'ticked''crossed'
|
'bullet'
|
The styling of the individual list item. |
tiers[].tier_offerings[].list_item_content_html
|
Yes |
string
|
N/A
|
The content of the individual list item. |
cta_html
|
No |
string
|
N/A
|
HTML for a CTA. |
| Name | Required? | Description |
|---|---|---|
description
|
No | Paragraph-style description of the pricing section. |
.p-pricing-block
Main element of the pricing block component, to represent 4 cards.
.p-pricing-block--25-75
Modifier class for 3 cards with a 25-75 split. The first 25% row is empty.
.p-pricing-block--50-50
Modifier class for 2 cards, where each card takes up 50% of the row.
.p-pricing-block__tier
Column element within a pricing block. Each column represents a card.
To import the Pricing block Jinja macro, copy the following statement into your Jinja template.
{% from "_macros/vf_pricing-block.jinja" import vf_pricing_block %}
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.