A CTA section is a prominent section typically used to quickly capture user's attention to a specific action as they scroll down the page. Depending on the design of call to action buttons or links, you can choose from a variety of layouts:
The CTA section pattern is composed of the following elements:
| Element | Description |
|---|---|
| Rule | Default rule |
| Title | Title text (to be placed in h2 heading) |
| Link | Link HTML or Text (using h2 style) |
| Description | Description text (one or more paragraphs) |
| Call to action block | CTA block beneath the description |
You can use default variant with 100 layout to create a full width container with title and link stacked vertically.
You can also pass text containing multiple partial links.
You can use default variant with 25-75 layout to create a 25-75 split container with title and link stacked vertically, on the right side.
You can pass text containing multiple partial links in this variant too.
You can use block variant with 100 layout to create full width container, with a required title, an optional description and one or more links/buttons.
You can use block variant with 25-75 layout to create 25-75 split container, with a required title, an optional description and one or more links/buttons on the right side.
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.
You may either use type:"html" with content:"<html-content></html-content>" to render custom HTML or use type:"text" which supports three types of CTA items:
{
"type": "cta",
"item": {
"primary": {
"content_html": "Primary button text",
"attrs": {
"href": "#",
"class": "optional-css-class"
}
},
"secondaries": [
{
"content_html": "Secondary button text",
"attrs": {
"href": "#"
}
}
],
"link": {
"content_html": "Link text",
"attrs": {
"href": "#"
}
}
}
}
or
{
"type": "cta",
"item": {
"type": "html",
"content": "<a href='#'>The quick brown fox jumps over the lazy dog ›</a>"
}
}
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 vf_cta_section Jinja macro can be used to generate a CTA section pattern. The API for the macro is shown below.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
variant
|
No |
One of:'default','block'
|
default
|
Choice of CTA variant |
layout
|
Yes |
One of:'-100','25-75'
|
100
|
Choice of CTA layout |
title_text
|
Yes, when variant is 'block'
|
string
|
N/A
|
h2 title text
|
attrs
|
No |
<Object>
|
N/A
|
Attributes to apply to the CTA section. See attribute forwarding docs for more info. |
blocks
|
No |
Array
|
[]
|
List of content blocks for the CTA section. See Blocks for available block types. |
CTA section slots are now deprecated, and will be removed in the future version of Vanilla. Please visit blocks for recommended implementation.
| Name | Required? | Description |
|---|---|---|
description Deprecated
|
No |
Paragraph-style content below the title and subtitle, only applicable to 'block' variant
|
cta Deprecated
|
Yes | Contents of CTA link or block |
To import the CTA Section Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_cta-section.jinja" import vf_cta_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.