The logo section is a pattern where the logo block serves as the main content, combined with a muted heading, optional description, and a CTA block.
It is composed of the following elements:
| Element | Description |
|---|---|
| Title (required) | Main heading text (h2) |
| Description | Description text (one or more paragraphs) |
| Blocks | Array of blocks (either cta-block or logo-block) |
The title can be made clickable by providing link attributes.
Logo section supports customizable padding options at the pattern level, using the section pattern. The Jinja macro for the pattern applies the section padding automatically.
By default, the pattern is wrapped in a regular section.
You can also use a deep section by changing the padding parameter.
Blocks in logo section use a flexible model where you can pass an array of blocks representing different types.
These can either be CTA Block or Logo Block.
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.Note: The cta-block utilizes CTA block from Basic section pattern
The logo block is a list of logos, within a fixed width container. The logos are automatically wrapped.
{
"type": "logo-block",
"item": {
"logos": [
{
"attrs": {
"src": "image-url",
"alt": "alt-text"
}
}
]
}
}
The vf_logo_section Jinja macro can be used to generate a logo section pattern. The API for the macro is shown
below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title
|
Yes |
Object
|
N/A
|
Title configuration object with text and optional link_attrs
|
title.text
|
Yes |
string
|
N/A
|
The main title text (rendered as h2) |
title.link_attrs
|
No |
Object
|
N/A
|
Attributes of an anchor element, as a dictionary. See attribute forwarding docs for more info. |
blocks
|
Yes |
Array<Object>
|
[]
|
Array of blocks to display in the section. See Blocks for configuration details. |
padding
|
No |
One of:'deep','default'
|
'default'
|
Padding variant for the entire section |
| Name | Required? | Description |
|---|---|---|
description
|
No |
Descriptive content for the section. One or more paragraphs |
To import the Logo Section Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_logo-section.jinja" import vf_logo_section %}
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.