Section & Variations › Header

Available Parameters
Parameter Type Description
variation Text
Default : header-default 		Set variation for Header section.
List of available variations :
  • header-variation-1
  • header-variation-2
  • header-variation-3
  • header-variation-4
  • header-contact-us
title Text
required 		Set title for Header section.
description Text Set description for Header section.
image Filename Set image for Header section.
The value is name of image file in the src/assets/images/ folder.
ctaType Text
alllow : default, include 		Set type of CTA parameter value.
cta Text HTML
-- or --
Twig FileName for : "ctaType":"include" 		Display CTA in header section.
Example:
"ctaType"  : "include",
"cta"      : "partials/form-get-started.twig"
ctaParams CTA Parameter Object Set parameter for CTA.
Example:
"ctaParams"        : {
    "btnClasses"    : "btn-primary rounded-pill"
}
checkList Array of Text Set list of check list item.
Example:
[
    "Free trial 30 days",
    "No credit card"
]
form Form File Name
Available for : header-contact-us 		Set form for Header Contact Us.
Example: partials/form-contact-us.twig
Available Variations
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-variation-1',

	'navbarClasses'	: 'navbar-light',

	'title'			: 'Powerful SaaS technology to help you achieve more',
	'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

	'image'			: 'homepage-1-header-image.png',

	'ctaType'		: 'include',
	'cta'			: 'partials/form-get-started.twig',
	'ctaParams'		: {
		'btnClasses'	: 'btn-primary rounded-pill'
	},

	'checkList'		: [
		'Free trial 30 days',
		'No credit card',
	]
  } %}
Section Preview Header Variation 1
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-variation-2',

	'navbarClasses'	: 'navbar-light',

	'title'			: 'Powerful SaaS technology to help you achieve more',
	'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

	'image'			: 'homepage-2-header-image.png',

	'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-lg rounded-pill btn-white" href="#get-demo">Request Demo</a>',

	'checkList'		: [
		'Free trial 30 days',
		'No credit card',
	]
  } %}
Section Preview Header Variation 2
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-variation-3',

	'navbarClasses'	: 'navbar-center',

	'title'			: 'Powerful SaaS technology to help you achieve more',
	'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

	'image'			: 'homepage-3-header-image.png',

	'cta'			: '<a class="btn btn-lg rounded-pill btn-primary btn-icon" href="#get-started">Get Started <i class="ic ic-chevron-right white"></i></a>'
  } %}
Section Preview Header Variation 3
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-variation-4',

	'title'			: 'Powerful SaaS technology to help you achieve more',
	'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

	'image'			: 'homepage-4-header-image.png',

	'cta'			: '<a class="btn btn-lg rounded-pill btn-primary btn-icon" href="#get-started">Get Started <i class="ic ic-chevron-right white"></i></a>
					<a class="btn btn-lg rounded-pill btn-white" href="#get-demo">Request Demo</a>'
  } %}
Section Preview Header Variation 4
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-blog-details",
	"title"		 : "SaaS customer development and no-code prototypes",
	"description"	 : false,
	"image"		 : "blog-detail-illustration-1.jpg",
	"meta" : {
		"tag"		 : "Marketing",
		"description"	 : "Jan 8  ·  7 min read"
	},
	"author"	: {
		"name"		 : "Melanie Rakananta",
		"position"	 : "Content Creator",
		"photo"		 : "blog-author-1.png"
	}
  } %}
Section Preview Header Blog Details
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-contact-us',

	'navbarClasses'	: 'navbar-center',

	'title'			: 'Get in touch with us today',
	'description'		: 'Have a question? We have answers. Whether you need technical support, want to learn more about feature management as a best practice',

	'image'			: false,

	'cta'			: '<div class="testimonial-box">
		<div class="rating"><i class="ic ic-star"></i><i class="ic ic-star"></i><i class="ic ic-star"></i><i class="ic ic-star"></i><i class="ic ic-star"></i></div>
		<div class="content"><p>“The most beautiful and easy to use no-code machine learning tool I have seen.”</p></div>
		<div class="author">
			<strong>David Bishop</strong>
			<span>Marketing Manager at EFG Co.</span>
		</div>
	</div>',
	'form'			: 'partials/form-contact-us.twig'
  } %}
Section Preview Header Contact Us
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	'variation'		: 'header-page-feature',

	'navbarClasses'	: 'navbar-light navbar-center',

	'title'			: 'Powerful SaaS technology to help you achieve more',
	'description'		: 'Discover how our SaaS solution can streamline your daily operations, saving you time and resources.',

	'image'			: 'feature-page-1-header-image.png',

	'cta'			: '<a class="btn btn-lg rounded-pill btn-brand-primary-2 btn-icon" href="#get-started">Get Started <i class="ic ic-chevron-right white"></i></a>
					<a class="btn btn-lg rounded-pill btn-white" href="#get-demo">Request Demo</a>'
  } %}
Section Preview Header Page Feature