Section & Variations › Header
Available Parameters
| Parameter | Type | Description |
|---|---|---|
variation
|
Text
required Default : header-variation-1
|
Set variation for Header section. List of available variations :
|
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",Example: "ctaType" : "links",
|
meta
|
Meta Object
required for header-blog-details
|
Set meta values for Header Blog Details. Example: {
|
author
|
Author Object
required for header-blog-details
|
Set author values for Header Blog Details. Example: {
|
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
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
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
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
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
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
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
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
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
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