Section & Variations › CTA

Available Parameters
Parameter Type Description
variation Text
required
Default : cta-variation-1 		Selected variations for CTA section.
List of available variations :
  • cta-variation-1
  • cta-variation-2
  • cta-variation-3
  • cta-variation-4
title Text
required 		Set title for CTA section.
description Text
required 		Set description for CTA section
ctaType Text
alllow : default, include
Available for : cta-variation-3 		Set type of CTA parameter value.
ctaParameters Parameters Object
Available for : cta-variation-3 		Set parameter values for included CTA.
Example:
{
    "btnClasses"    : "btn-brand-light-2",
}
cta Text HTML
-- or --
Twig FileName for : "ctaType":"include" 		Display CTA button of form in CTA section.
Example:
"ctaType"  : "default",
"cta"      : "<a class=\"btn btn-secondary\" href=\"#pricing\">Get Started - It’s free</a>"
Example:
"ctaType"  : "include",
"cta"      : "partials/form-get-started.twig"
image Text Filename Set image for CTA section.
The Value is name of image file in the src/assets/images/ folder.
Available Variations
Starter Kit Codes 
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-1",

	"title"			: "Get started with our platform now and supercharge your productivity.",
	"description"		: "We've answered the most frequent of those frequent questions below.",

	"cta"			: "<a class=\"btn btn-lg btn-brand-light-2 rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-lg btn-outline-white\" href=\"#get-demo\">Learn More</a>"
  } %}
Section Preview CTA Variation 1
Starter Kit Codes 
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-2",

	"title"			: "See how our<br/> software can help<br/> your business grow.",
	"description"		: "We've answered the most frequent of those frequent questions below.",

	"cta"			: "<a class=\"btn btn-lg btn-brand-light-2 rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-lg btn-outline-white\" href=\"#get-demo\">Learn More</a>",

	"image"			: "homepage-2-cta-image.png"
  } %}
Section Preview CTA Variation 2
Starter Kit Codes 
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-3", 

	"title"			: "Experience unparalleled flexibility with our SaaS product",
	"description"		: "We've answered the most frequent of those frequent questions below.",

	"ctaType"		: "include",
	"ctaParameters"	: {
		"btnClasses"	: "btn-brand-light-2",
	},
	"cta"			: "partials/form-get-started.twig"
  } %}
Section Preview CTA Variation 3
Starter Kit Codes 
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-4", 

	"title"			: "Experience unparalleled flexibility with our SaaS product",
	"description"		: "We've answered the most frequent of those frequent questions below.",

	"cta"			: "<a class=\"btn btn-lg btn-white rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-lg btn-outline-brand-dark-1\" href=\"#get-demo\">Learn More</a>",

	"image"			: "homepage-4-cta-image.png"
  } %}
Section Preview CTA Variation 4