The resources pattern is used to display a collection of resources. Each resource can include a title, image, description, author(s), and publication date.
It is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | Main heading text (h2) |
| Description | Paragraph styled description text |
| CTA block | CTA with variations of primary/secondary buttons and text links |
| Resource blocks (required) | Resources with categories, each containing a 16:9 cover image or a logo, title, description, and citation metadata. |
The title can be made clickable by providing link attributes.
You can also pass a description, to provide additional information about resources
You can also pass a CTA block, under the description
By providing has_images: false to the pattern, you can stop images from rendering
By providing has_categories: false to the pattern, you can stop categories from rendering
By providing both has_categories: false and has_images: false, the pattern renders only textual content in a 50/50 layout
Resource blocks can also be used without resource descriptions
You can use a 16:9 image for a resource, a logo image, or no image at all
You can pass also multiple, comma separated authors
The vf_resources Jinja macro can be used to generate a resources pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title
|
Yes |
object
|
{}
|
Title configuration with text and optional link (link attributes)
|
blocks
|
Yes |
Array<object>
|
[]
|
List of blocks |
There are three different content blocks within the blocks array:
Description blocks can be used to display elaborative text content.
By default, the description contents are rendered within a <p> tag, but you can also use type:"html" to render raw HTML
content.
{
"type": "description",
"item": {
"type": "text" | "html",
"content": "Your content here"
}
}
type: Either "text" (default) or "html". Text content is wrapped in <p> tags, HTML content is rendered as-is.content: The text or HTML content to display.The CTA block allows you to include call-to-action elements within the section.
It supports three types of CTA items:
{
"type": "cta-block",
"item": {
"primary": {
"content_html": "Primary button text",
"attrs": {
"href": "link-url",
"class": "optional-css-class"
}
},
"secondaries": [
{
"content_html": "Secondary button text",
"attrs": {
"href": "link-url"
}
}
],
"link": {
"content_html": "Link text",
"attrs": {
"href": "link-url"
}
}
}
}
primary: Optional primary button configuration.secondaries: Optional array of secondary button configurations.link: Optional text link configuration.Each of the CTA configurations accepts the following properties:
content_html: The inner HTML of the CTA item.attrs: Dictionary of button/link attributes. These are applied to the CTA element. If href is present, the CTA item will be an <a>, otherwise it will be a <button>. See attribute forwarding docs for more info.The Resources block allows you to specify categories and resource items to appear within those categories.
| Name | Required? | Type | Description |
|---|---|---|---|
render_images
|
No |
boolean
|
Whether to render resource images. Default is true
|
render_categories
|
No |
boolean
|
Whether to render category names. Default is true
|
categories
|
Yes |
Array<object>
|
List of categories, containing category title and resource items |
categories[].title
|
Yes |
Array<object>
|
Category title text, rendered in small caps text |
categories[].items
|
Yes |
Array<object>
|
List of resource items |
categories[].items[].title
|
Yes |
object
|
Title configuration for the article |
categories[].items[].title.text
|
Yes |
string
|
The title text |
categories[].items[].title.link
|
No |
object
|
Link attributes object, see attribute forwarding |
categories[].items[].title.attrs
|
No |
object
|
Title attributes object, see attribute forwarding |
categories[].items[].image
|
No |
object
|
Image configuration for the article |
categories[].items[].image.type
|
No |
One of image or logo
|
Image type for the thumbnail. Defaults to image which applies 16:9 ratio to the container
|
categories[].items[].image.attrs
|
No |
object
|
Image attributes object (src, alt, etc.), see attribute forwarding |
categories[].items[].description
|
No |
object
|
Description configuration for the article |
categories[].items[].description.text
|
Yes |
string
|
The description text |
categories[].items[].description.attrs
|
No |
object
|
Paragraph attributes object, see attribute forwarding |
categories[].items[].description.class
|
No |
string
|
Additional classes for the description |
categories[].items[].citation
|
No |
object
|
Citation configuration for the article |
categories[].items[].citation.authors
|
No |
Array<object>
|
List of author objects |
categories[].items[].citation.authors[].text
|
Yes |
string
|
Author name |
categories[].items[].citation.authors[].link
|
No |
object
|
Link attributes object, see attribute forwarding |
categories[].items[].citation.date
|
No |
object
|
Date configuration |
categories[].items[].citation.date.text
|
Yes |
string
|
Date text |
categories[].items[].citation.date.attrs
|
No |
object
|
Time element attributes object, see attribute forwarding |
To import the Resources Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_resources.jinja" import vf_resources %}
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.