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.
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
|
| Name | Required? | Description |
|---|---|---|
description
|
No |
Paragraph-style content below the title and subtitle, only applicable to 'block' variant
|
cta
|
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.