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
Set type of CTA parameter value.
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-lg btn-primary btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right white\"></i></a><a class=\"btn btn-lg btn-light btn-icon\" href=\"#demo\">Request Demo</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"			: "All your tools and teammates <br/>together in one place",
	"description"		: "Simplify your workflow today with a 14 day free trial",

	"ctaType"		: "include",
	"cta"			: "partials/form-get-started.twig"
  } %}
Section Preview CTA Variation 1
Starter Kit Codes
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-2",

	"title"			: "Transform your business with powerful SaaS solutions",
	"description"		: "An awesome tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers.",

	"cta"			: "<a class=\"btn btn-lg btn-primary btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right white\"></i></a><a class=\"btn btn-lg btn-light btn-icon\" href=\"#demo\">Request Demo</a>"
  } %}
Section Preview CTA Variation 2
Starter Kit Codes
{# include sections/cta  #}
{% include "sections/cta.twig", with {
    	"variation"		: "cta-variation-3", 

	"title"			: "Transform the way you work with our powerful tools",
	"description"		: "Our flexible architecture ensures smooth interoperability, enabling you to maximize productivity without disruption.",

	"cta"			: "<a class=\"btn btn-lg btn-primary btn-icon\" href=\"#get-started\">Get started <i class=\"ic ic-chevron-right white\"></i></a>
					<a class=\"btn btn-lg btn-light\" href=\"#get-demo\">Request Demo</a>",

	"image"			: "homepage-3-cta-image.png"
  } %}
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"		: "An awesome tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers.",

	"cta"			: "<a class=\"btn btn-lg btn-brand-primary-3 btn-icon\" href=\"#get-started\">Get started <i class=\"ic ic-chevron-right white\"></i></a>
					<a class=\"btn btn-lg btn-light\" href=\"#get-demo\">Request Demo</a>",

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