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-variation-5
  • header-about-us
  • header-about-us-2
  • header-about-us-3
  • header-blog-details
title Text
required
Set title for Header section.
subtitle Text
Available for : header-about-us-3
Set subtitle for Header About Us 3.
description Text Set description for Header section.
image Filename
or
Array of Filename for header-about-us
Set image for Header section.
The value is name of image file in the src/assets/images/ folder.
ctaType Text
alllow : default, include, links
Set type of CTA parameter value.
cta Text HTML
-- or --
Twig FileName for : "ctaType":"include"
-- or --
Array of Link Object for : "ctaType":"links"
Display CTA in header section.
Example:
"ctaType"  : "include",
"cta"      : "partials/form-get-started.twig"

Example:
"ctaType"  : "links",
"cta"         :     [
    {
        "link"     : "#all",
        "title"     : "All resource",
        "class"     : "active"
    }
]
meta Meta Object
required for header-blog-details
Set meta values for Header Blog Details.
Example:
{
    "tag"           : "Analytics",
    "description"   : "Oct 3  ·  7 min read"
}
author Author Object
required for header-blog-details
Set author values for Header Blog Details.
Example:
{
    "name"       : "Cornelia Carter",
    "position"   : "Content Director",
    "photo"      : "blog-author-1.png"
}
Available Variations
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-variation-1",
	"title"		 : "Cloud-based brilliance at your fingertips",
	"description"	 : "Discover how our SaaS solution can streamline your daily operations, saving you time and resources.",
	"image"		 : "homepage-1-header-image.png",
	"cta"		 : "<a class="btn btn-primary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right"></i></a><a class="btn btn-light" href="#get-demo">Get a demo</a>"
  } %}
Section Preview Header Variation 1
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-variation-2",
	"title"		 : "Cloud-based brilliance at your fingertips",
	"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-primary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right"></i></a><a class="btn btn-light" href="#get-demo">Get a demo</a>"
  } %}
Section Preview Header Variation 2
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-variation-3",
	"title"		 : "Cloud-based brilliance at your fingertips",
	"description"	 : "An awesome tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers.",
	"image"		 : "homepage-3-header-image.png",
	"cta"		 : "<a class="btn btn-primary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right"></i></a><a class="btn btn-light" href="#get-demo">Get a demo</a>"
  } %}
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-1-header-image.png",
	"ctaType"	 : "include",
	"cta"		 : "partials/form-get-started.twig"
  } %}
Section Preview Header Variation 4
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-variation-5",
	"title"		 : "Experience the future of SaaS tools with Chroma",
	"description"	 : "Discover how our SaaS solution can streamline your daily operations, saving you time and resources.",
	"image"		 : "homepage-1-header-image.png",
	"cta"		 : "<a href="#play" class="btn btn-icon btn-circle btn-secondary"><i class="ic ic-play"></i></a>"
  } %}
Section Preview Header Variation 5
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-about-us",
	"title"		 : "About our company",
	"description"	 : "We are Chroma, an awesome & powerful tools for your business, increase business revenue with enterprise-grade links built to acquire and engage customers. ",
	"image"		 : [
		"about-header-image-1.png",
		"about-header-image-2.png",
		"about-header-image-3.png",
		"about-header-image-4.png"
	],
	"ctaType"	 : false,
	"cta"		 : false
  } %}
Section Preview Header About Us
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-about-us-2",
	"title"		 : "Welcome to Chroma - Where excellence meets innovation",
	"description"	 : "At Chroma, we are dedicated to delivering exceptional solutions that cater to the needs of our valued customers. With a strong commitment to quality, reliability, and customer satisfaction, we have established ourselves as a trusted name in the industry.",
	"image"		 : "about-2-header-image.png",
	"cta"		 : "<a class="btn btn-primary btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right"></i></a>"
  } %}
Section Preview Header About Us 2
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-about-us-3",
	"navbarClasses"	 : "navbar-light",
	"title"		 : "About us",
	"subtitle"	 : "Our team of passionate professionals brings together your team's expertise  to how your team works together to achieve the organization's goals. With a focus on specific values or principles, we strive to what sets your organization apart from others in your industry.",
	"description"	 : "At Chroma, we are dedicated to delivering exceptional solutions that cater to the needs of our valued customers. With a strong commitment to quality, reliability, and customer satisfaction, we have established ourselves as a trusted name in the industry.",
	"image"		 : "about-3-header-image.png",
	"cta"		 : "<a class="btn btn-light btn-icon" href="#get-started">Get started <i class="ic ic-chevron-right dark"></i></a>"
  } %}
Section Preview Header About Us 3
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-blog",
	"title"		 : "Blog & resources",
	"description"	 : "The latest news, announcements, lessons and learnings from Worthy",
	"image"		 : false,
	"ctaType"	 : "links",
	"cta"		 : 	[
		{
			"link"	 : "#all",
			"title"	 : "All resource",
			"class"	 : "active"
		},
		{
			"link"	 : "#marketing",
			"title"	 : "Marketing",
		},
		{
			"link"	 : "#analytics",
			"title"	 : "Analytics",
		},
		{
			"link"	 : "#business",
			"title"	 : "Business",
		},
		{
			"link"	 : "#human-resources",
			"title"	 : "Human resources",
		},
		{
			"link"	 : "#announcement",
			"title"	 : "Announcement",
		},
	]
  } %}
Section Preview Header Blog
Starter Kit Codes
{# include sections/header  #}
{% include "sections/header.twig", with {
    	"variation"	 : "header-blog-details",
	"title"		 : "Does your e-mail marketing strategy need a revamp?",
	"description"	 : false,
	"image"		 : "blog-detail-illustration-1.jpg",
	"meta" : {
		"tag"		 : "Analytics",
		"description"	 : "Oct 3  ·  7 min read"
	},
	"author"	: {
		"name"		 : "Cornelia Carter",
		"position"	 : "Content Director",
		"photo"		 : "blog-author-1.png"
	}
  } %}
Section Preview Header Blog Details