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
  • cta-variation-5
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"
ctaParams CTA Parameter Object Set parameter for CTA.
Example:
"ctaParams"        : {
    "btnClasses"    : "btn-primary rounded-pill"
}
image Text Filename Set image for CTA section.
The Value is name of image file in the src/assets/images/ folder.
checkList Array of Text Set list of check list item.
Example:
[
    "Free trial 30 days",
    "No credit card"
]
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',
	'ctaParams'		: {
		'btnClasses'	: 'btn-primary rounded-pill'
	},

	'checkList'		: [
		'Free trial 30 days',
		'No credit card',
	]
  } %}
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'		: 'Our flexible architecture ensures smooth interoperability, enabling you to maximize productivity without disruption.',

	'cta'			: '<a class="btn btn-xl rounded-pill btn-white btn-icon" href="#get-started">Get Started <i class="ic ic-chevron-right"></i></a>'
  } %}
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'		: 'Our flexible architecture ensures smooth interoperability, enabling you to maximize productivity without disruption.',

	'cta'			: '<a class="btn btn-lg rounded-pill btn-brand-secondary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right white"></i></a>
					<a class="btn btn-default btn-lg" 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',

	'ctaType'		: 'include',
	'cta'			: 'partials/form-get-started.twig',
	'ctaParams'		: {
		'btnClasses'	: 'btn-primary rounded-pill'
	},
	
	'checkList'		: [
		'Free trial 30 days',
		'No credit card',
	],

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

	'title'			: 'Transform your business with powerful SaaS solutions',
	'description'		: 'Our flexible architecture ensures smooth interoperability, enabling you to maximize productivity without disruption.',

	'cta'			: '<a class="btn btn-xl rounded-pill btn-brand-primary btn-icon" href="#get-started">Get Started <i class="ic ic-chevron-right white"></i></a>',

	'image'			: 'homepage-5-cta-image.png'
  } %}
Section Preview CTA Variation 5