Section & Variations › Header

Available Parameters
Parameter Type Description
variation Text
required
Default : header-variation-1 		Set variation for Header section.
List of available variations :
  • header-variation-1
  • header-variation-2
  • header-variation-3
  • header-variation-4
  • header-contact-us
  • header-navbar-only
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"
Available Variations
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-variation-1",
	"title"			: "Drive growth with our scalable SaaS applications",
	"description"		: "An awesome tools for your business, increase business revenue 
	with enterprise-grade links built to acquire and engage customers.",
	"image"			: "homepage-1-header-image.png",
	"cta"			: "<a class=\"btn btn-white rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-outline-dark-1\" href=\"#get-demo\">Learn More</a>"
  } %}
Section Preview Header Variation 1
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-variation-2",
	"title"			: "Drive growth with our scalable SaaS applications",
	"description"		: "An awesome tools for your business, increase business revenue 
	with enterprise-grade links built to acquire and engage customers.",
	"image"			: "homepage-2-header-image.png",
	"cta"			: "<a class=\"btn btn-white rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-outline-dark-1\" href=\"#get-demo\">Learn More</a>"
  } %}
Section Preview Header Variation 2
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-variation-3",
	"title"			: "Drive growth with our scalable SaaS applications",
	"description"		: "An awesome tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers.",
	"image"			: "homepage-2-header-image.png",
	"ctaType"		: "include",
	"cta"			: "partials/form-get-started.twig"
  } %}
Section Preview Header Variation 3
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-variation-4",
	"title"			: "Drive growth with our scalable SaaS applications",
	"description"		: "An awesome tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers.",
	"image"			: "homepage-2-header-image.png",
	"cta"			: "<a class=\"btn btn-white rounded-pill btn-icon\" href=\"#get-started\">Get Started <i class=\"ic ic-chevron-right dark\"></i></a>
					<a class=\"btn btn-outline-dark-1\" href=\"#get-demo\">Learn More</a>"
  } %}
Section Preview Header Variation 4
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-contact-us",
	"title"			: "Get in touch ",
	"description"		: "All of our plans are customized to fit the needs of small and large teams.",
	"image"			: false,
	"form"			: "partials/form-contact-us.twig"
  } %}
Section Preview Header For Contact Us
Starter Kit Codes 
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"		: "header-navbar-only"
  } %}
Section Preview Header Navbar Only