A quote wrapper is a pattern used to prominently display a quotation alongside an optional citation, logo, and image.
The quote wrapper pattern is composed of the following elements:
| Element | Description |
|---|---|
| Quote (required) | Quote text. |
| Header | Header text & CTA. Useful for adding a title/link that describes all of a series of quotes. |
| Signpost image | Small image to display at the left/top of the quote, such as a logo or a portrait. |
| Call to action | A CTA block. |
| Image | Image to associate with the quote. |
| Source | Name, title, and organisation of the quote's source. |
All examples shown here use h2-sized quote text. This can be changed to h4 or h6 by using the quote_size parameter
of the Quote Wrapper Jinja macro.
The following example includes all required and optional elements.
If the quote is not associated with a specific brand or entity, or no logo is available, the logo can be omitted.
If no source is available, the quote can be displayed without a citation.
If no heading is desired, the quote can be displayed without a heading, omitting the title and title link.
The heading should be omitted if the quote is not the first element in its page section. If the quote is the first element in its section, a heading should be used to introduce the quote and distinguish it from previous content.
The minimal quote wrapper pattern includes only the quote text.
The vf_quote_wrapper Jinja macro can be used to generate a Quote Wrapper pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
No |
string
|
N/A
|
Text to be displayed as a quote section summary. |
quote_size
|
No |
One of:'small','medium','large'
|
'medium'
|
Size of the quote text.'small' for h6,'medium' for h4,'large' for h2.
|
quote_text
|
Yes |
string
|
N/A
|
Text of the quote. Do not include quotation marks; they are added by the macro. |
citation_source_name_text
|
No |
string
|
N/A
|
Name of the quote's source. |
citation_source_title_text
|
No |
string
|
N/A
|
Title/role of the quote's source. |
citation_source_organisation_text
|
No |
string
|
N/A
|
Name of an organisation associated with the quote's source. |
is_shallow
|
No |
boolean
|
false
|
Whether the quote should be wrapped in a shallow section. If false, a regular section is used.
|
| Name | Required? | Description |
|---|---|---|
signpost_image
|
No | Small image (such as a logo) to place in the left column. |
heading_link
|
No | A link to be displayed in the heading, adjacent to the title. |
cta
|
No | Contents of a CTA block beneath the quote. |
image
|
No | An image or other media element to be displayed beneath the quote. |
To import the Quote Wrapper Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_quote-wrapper.jinja" import vf_quote_wrapper %}
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.