A CTA (call to action) block is a pattern that is used to encourage users to take a specific action. This could be to learn more details about a product, contact someone, or to download a file.
In Vanilla v4.25.0, the borderless variant of the CTA block pattern was made the default variant. The bordered variant is now deprecated and will be removed in the next major version.
In case you need to use the bordered variant in the meantime, you can include the top border and
padding by using the .has-border
class. Note that this class will be removed in the next major version.
In Vanilla v4.25.0, the borderless variant of the CTA block pattern was made the default variant.
The .is-borderless
class will be removed in the next major version, as it has no effect anymore.
.p-cta-block
Main element of the CTA block.
&.is-borderless
Deprecated modifier class that removed top border and padding before v4.25.0. This is now the default behavior, so this class is no longer needed.
&.has-border
Deprecated modifier class that adds a top border and padding.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-cta-block;
@include vf-p-buttons;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.