Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< activity-item
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-style="solid|dotted|dashed"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
date="Any date. Ex: 26 may 2023"
date-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
date-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
icon-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
icon-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
is-title-bold="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
sub-heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
sub-heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
timeline-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
title-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
title-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
title-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /activity-item >}}

{{< /main-container >}}

Samples

Syntax

{{< alert
alert-style="center|left|box"
alert-type="tip|error|warning|info|note"
heading="Any text"
heading-prefix="Any text"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /alert >}}

Samples

Syntax

{{< animated-background
animation-duration="Any number"
background-end-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-start-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-animation-enabled="true|false"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-gradient-angle="Any number"
overlay-gradient-stops="any background or gradient"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /animated-background >}}

Samples

Syntax

{{< article-in-column-section
article-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
article-column-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
article-column-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
article-column-count="Any number"
article-column-gap="Any value in px,em,rem or %"
article-column-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
article-content-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
article-content-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
article-content-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
article-content-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
article-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /article-in-column-section >}}

Samples

Syntax

{{< avatar
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
badge-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
badge-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
badge-text="Any text"
badge-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
badge-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

Samples

Syntax

{{< bar-container
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< bar-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-stretch-evenly="true|false"
text="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /bar-item >}}

{{< /bar-container >}}

Samples

Syntax

{{< breadcrumb-container
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< breadcrumb-item
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color-hover="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /breadcrumb-item >}}

{{< /breadcrumb-container >}}

Samples

Syntax

{{< button
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-style="default|primary|success|error|link"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tooltip-text="Any text" >}}

The actual message goes here

{{< /button >}}

Samples

Syntax

{{< button-custom
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< button-container
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< button
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-style="default|primary|success|error|link"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tooltip-text="Any text" >}}

The actual message goes here

{{< /button >}}

{{< /button-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-4-items-with-title-and-link-item
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-1="Any text"
button-text-2="Any text"
button-text-3="Any text"
button-text-4="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-1="Any text"
heading-2="Any text"
heading-3="Any text"
heading-4="Any text"
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link-address-1="Any valid http link"
link-address-2="Any valid http link"
link-address-3="Any valid http link"
link-address-4="Any valid http link"
sub-heading-1="Any text"
sub-heading-2="Any text"
sub-heading-3="Any text"
sub-heading-4="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /main-container >}}

Samples

Syntax

{{< card-5-items-with-title
heading-1="Any text"
heading-2="Any text"
heading-3="Any text"
heading-4="Any text"
heading-5="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
image-5="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link-1="Any valid http link"
link-2="Any valid http link"
link-3="Any valid http link"
link-4="Any valid http link"
link-5="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, center or right to align horizontally" >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-5-items-with-title-and-details-item
align-horizontal="Use left, center or right to align horizontally"
align-vertical="Use top, center or bottom to align vertically"
heading-1="Any text"
heading-2="Any text"
heading-3="Any text"
heading-4="Any text"
heading-5="Any text"
heading-background-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-1="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
image-5="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link-1="Any valid http link"
link-2="Any valid http link"
link-3="Any valid http link"
link-4="Any valid http link"
link-5="Any valid http link"
overlay-background-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-background-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-background-color-3="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-background-color-4="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-background-color-5="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-1="Any text"
text-2="Any text"
text-3="Any text"
text-4="Any text"
text-5="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< /main-container >}}

Samples

Syntax

{{< card-6-items-with-title
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
image-5="Any valid image link"
image-6="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
link-1="Any valid http link"
link-2="Any valid http link"
link-3="Any valid http link"
link-4="Any valid http link"
link-5="Any valid http link"
link-6="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-show-details-on-hover-item
alt-text="Any text"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-show-details-on-hover-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-changing-images-on-hover-item
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
icon-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
icon-hover-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
subheading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-changing-images-on-hover-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-circular-image-title-description-item
button-text="Any text"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-circular-image-title-description-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-heading-subheading-button-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-link-1="Any valid http link"
button-link-2="Any valid http link"
button-link-3="Any valid http link"
button-link-4="Any valid http link"
button-text-1="Any text"
button-text-2="Any text"
button-text-3="Any text"
button-text-4="Any text"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-link="Any valid http link"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
sub-heading="Any text"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-icon-and-text-item
card-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
card-text="Any text"
card-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link" >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-and-details-as-overlay-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /card-with-image-and-details-as-overlay-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-tags-and-details-item
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
sub-heading="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tags="Comma seperated values"
tags-link="Any valid http link"
user-image="Any valid image link" >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-1-item
button-text="Any text"
heading="Any text"
heading-order="Any number"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-order="Any number"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-order="Any number"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-1-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-10-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-10-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-11-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-11-item >}}

{{< /main-container >}}

Samples

Syntax

{{< card-with-image-title-description-12
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-prefix-text="Any text"
button-text="Any text"
description-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
description-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
description-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
image-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link-address="Any valid http link"
link-description-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
name-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading-text="Any text"
tag-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /card-with-image-title-description-12 >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-2-item
author-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-image="Any valid image link"
author-initial-text="Any text"
author-link="Any valid http link"
author-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
link-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-2-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-4-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-fit="fill = Container is resized, contain = Resized to fit based on aspect ratio, cover = Resized to fill container"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
page-link="Any valid http link"
sub-heading="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-4-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-5-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading="Any text"
heading-align-horizontal="Use left, center or right to align horizontally"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, center or right to align horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-5-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-6-item
category-name="Any text"
category-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-text-color-hover="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /card-with-image-title-description-6-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-7-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
details-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
details-container-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
link-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /card-with-image-title-description-7-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-8-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
date="Any date. Ex: 26 may 2023"
date-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
tag-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tags="Comma seperated values"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
time="Any time. Ex: 12:00PM" >}}

The actual message goes here

{{< /card-with-image-title-description-8-item >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-image-title-description-9-item
author-image="Any valid image link"
author-link="Any valid http link"
author-name="Any text"
author-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
category-name="Any text"
facebook-link="Any valid http link"
gradient-background-color-bottom="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
gradient-background-color-top="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-link="Any valid http link"
image="Any valid image link"
is-gradient-background="true|false"
is-open-in-new="true|false"
is-social-icons="true|false"
is-stretch-evenly="true|false"
move-link="Any valid http link"
tag-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-link="Any valid http link"
tag-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tags="Comma seperated values"
twitter-link="Any valid http link" >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-numbered-text-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-heading="Any text"
card-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-number="Any number"
card-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
card-paragraph-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-paragraph-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-paragraph-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-serial-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
card-serial-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-serial-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /card-with-numbered-text-item >}}

{{< /main-container >}}

Samples

Syntax

{{< card-with-social-icons-container
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
description-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
description-icon-image="Any valid image link"
description-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
description-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
description-text="Any text"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
icon-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< card-with-social-icons-item
icon-image="Any valid image link"
icon-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< /card-with-social-icons-container >}}

Samples

Syntax

{{< card-with-text-on-both-sides
button-text-1="Any text"
button-text-2="Any text"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-full-width="true|false"
is-open-in-new="true|false"
is-show-link-1="true|false"
is-show-link-2="true|false"
is-stretch-evenly="true|false"
left-content-path="Relative path to any content in your website"
link-address-1="Any valid http link"
link-address-2="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-content-path="Relative path to any content in your website" >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-title-link-and-reveal-item
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-rotate-angle="Any number"
sub-heading="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /main-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< card-with-video-and-text-item
button-text="Any text"
description-text="Any text"
heading="Any text"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
link-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
video-link="Any valid http link" >}}

{{< /main-container >}}

Samples

Syntax

{{< carousel-with-custom-list-items-and-button
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-responsive-count="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
image-5="Any valid image link"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
list-arrow-style="s-1|s-2|s-3|...|s-15"
list-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
list-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /carousel-with-custom-list-items-and-button >}}

Samples

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-multiple-cards-1-item
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
sub-heading="Any text"
sub-heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< /carousel-container-multiple >}}

Samples

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-multiple-cards-2-item
circle-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
circle-box-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
circle-box-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
circle-text="Any text"
circle-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
circle-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
circle-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /carousel-with-multiple-cards-2-item >}}

{{< /carousel-container-multiple >}}

Samples

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-multiple-cards-3-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
link="Any valid http link"
tags="Comma seperated values"
tags-background-colors="Comma seperated color values"
tags-text-colors="Comma seperated color values"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /carousel-with-multiple-cards-3-item >}}

{{< /carousel-container-multiple >}}

Samples

Syntax

{{< carousel-container-single
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< carousel-with-single-card-1-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
detail="Any text"
detail-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
link="Any valid http link" >}}

{{< /carousel-container-single >}}

Samples

Syntax

{{< carousel-container-single
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< carousel-with-single-card-2-item
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
link="Any valid http link"
text-align-horizontal="Use left, center or right to align horizontally"
text-background="Any text"
text-background-opacity="Any decimal between 0 to 1. It can be a fraction too. Ex: 0.1, 0.01, 0.9, 0, 1"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
truncate-length="Any number" >}}

The actual message goes here

{{< /carousel-with-single-card-2-item >}}

{{< /carousel-container-single >}}

Samples

Syntax

{{< carousel-with-thumbnail-images-container
active-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-thumbnail-images-item
align-horizontal="Use left, center or right to align horizontally"
align-vertical="Use top, center or bottom to align vertically"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-active="true|false"
is-open-in-new="true|false"
link="Any valid http link"
overlay-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text="Any text"
text-align-horizontal="Use left, center or right to align horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /carousel-with-thumbnail-images-container >}}

Samples

Syntax

{{< compare-container
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-left="Any text"
heading-right="Any text"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< compare-item
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-hover-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-hover-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-left-order="Any number"
button-link-left="Any valid http link"
button-link-right="Any valid http link"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-right-order="Any number"
button-text-left="Any text"
button-text-right="Any text"
group-title-text="Any text"
image-align-horizontal="Use left, center or right to align horizontally"
image-heading-left="Any valid image link"
image-heading-left-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-heading-right="Any valid image link"
image-heading-right-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-item-left="Any valid image link"
image-item-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-item-right="Any valid image link"
is-bold-text="true|false"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
left-anchor-text="Any text"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link-left="Any valid http link"
link-left-order="Any number"
link-right="Any valid http link"
link-right-order="Any number"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-anchor-text="Any text"
sub-heading-left="Any text"
sub-heading-right="Any text"
subheading-left-order="Any number"
subheading-right-order="Any number"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-left="Any text"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-right="Any text"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /compare-container >}}

Samples

Syntax

{{< countdown-1
add-days-count="Any number"
background-image="Any valid image link"
date="Any date. Ex: 26 may 2023"
expired-message-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
expired-message-text="Any text"
is-open-in-new="true|false"
link="Any valid http link"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
loading-text="Any text"
loading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

Samples

Syntax

{{< countdown-2
add-days-count="Any number"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
date="Any date. Ex: 26 may 2023"
expired-message-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
expired-message-text="Any text"
is-open-in-new="true|false"
link="Any valid http link"
loading-text="Any text"
loading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

Samples

Syntax

{{< countdown-3
add-days-count="Any number"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
date="Any date. Ex: 26 may 2023"
expired-message-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
expired-message-text="Any text"
is-open-in-new="true|false"
link="Any valid http link"
loading-text="Any text"
loading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

Samples

Syntax

{{< countdown-4
add-days-count="Any number"
date="Any date. Ex: 26 may 2023"
expired-message-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
expired-message-text="Any text"
is-open-in-new="true|false"
link="Any valid http link"
loading-text="Any text"
loading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

Samples

Syntax

{{< details
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
close-image="Any valid image link"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-full-width="true|false"
is-open="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
open-image="Any valid image link"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /details >}}

Samples

Syntax

{{< downloads
apple-link="Any valid http link"
google-link="Any valid http link"
icon-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-full-width="true|false"
is-open-in-new="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< feature-posts
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
detail-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-arrow-navigator-visible="true|false"
is-auto-play-enabled="true|false"
is-dot-navigator-visible="true|false"
is-navigation-repeat-on="true|false"
is-responsive="true|false"
is-width-variable="true|false"
links="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
play-speed-in-ms="Any number"
slide-to-scroll-count="Any number"
slide-to-show-count="Any number"
sliding-speed-in-ms="Any number"
text-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

Samples

Syntax

{{< get-page
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
path="Relative path to any content in your website" >}}

The actual message goes here

{{< /get-page >}}

Samples

Syntax

{{< heading
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-level="h1|h2|h3|h4|h5|h6"
heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, center or right to align horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /heading >}}

Samples

Syntax

{{< hero-section-1-container
background-image="Any valid image link"
content-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-body-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-bold-sub-heading="true|false"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
item-body-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
path="Relative path to any content in your website"
sub-heading="Any text"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
sub-heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
sub-heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
underline-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
underline-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
underline-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< hero-section-1-item
counting-speed-in-ms="Any number"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
item-number="Any number"
item-suffix-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
item-suffix-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
item-suffix-text="Any text"
item-text="Any text"
item-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
item-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
item-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
link="Any valid http link"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< /hero-section-1-container >}}

Samples

Syntax

{{< hero-section-with-background-and-content
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
content-align-horizontal="Use left, center or right to align horizontally"
content-align-vertical="Use top, center or bottom to align vertically"
content-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
content-bottom-length="Any number"
content-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
content-left-length="Any number"
content-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
content-right-length="Any number"
content-top-length="Any number"
content-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-background-repeated="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
overlay-length-from-bottom="Any number"
overlay-length-from-left="Any number"
overlay-length-from-right="Any number"
overlay-length-from-top="Any number"
overlay-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
sub-heading="Any text"
sub-heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
sub-heading-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
sub-heading-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-align-horizontal="Use left, center or right to align horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
typing-delay-duration="Any number"
typing-pause-duration-before-repeat="Any number"
typing-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
typing-text-content="Any text" >}}

The actual message goes here

{{< /hero-section-with-background-and-content >}}

Samples

Syntax

{{< hero-section-with-background-image-text
background-image="Any valid image link"
button-background-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius-1="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-radius-2="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width-1="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-border-width-2="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-link-1="Any valid http link"
button-link-2="Any valid http link"
button-padding-1="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text-1="Any text"
button-text-2="Any text"
button-text-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
image-align-horizontal="Use left, center or right to align horizontally"
image-align-vertical="Use top, center or bottom to align vertically"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-flipped="true|false"
is-full-width="true|false"
is-link-hover-underlined="true|false"
is-link-underlined="true|false"
is-open-in-new="true|false"
link-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-arrow-style="s-1|s-2|s-3|...|s-15"
list-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, center or right to align horizontally"
text-align-vertical="Use top, center or bottom to align vertically"
text-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /hero-section-with-background-image-text >}}

Samples

Syntax

{{< hero-section-with-full-screen
button-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
heading-left="Any text"
heading-right="Any text"
is-open-in-new="true|false"
left-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
left-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
right-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
right-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /hero-section-with-full-screen >}}

Samples

Syntax

{{< image
align-horizontal="Use left, center or right to align horizontally"
alt-text="Any text"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-style="solid|dotted|dashed"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text="Any text"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

Samples

Syntax

{{< image-grid
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-10="Any valid image link"
image-11="Any valid image link"
image-12="Any valid image link"
image-2="Any valid image link"
image-3="Any valid image link"
image-4="Any valid image link"
image-5="Any valid image link"
image-6="Any valid image link"
image-7="Any valid image link"
image-8="Any valid image link"
image-9="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< map-full-screen
address-image="Any valid image link"
address-text="Any text"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
email-id="Any valid email"
email-image="Any valid image link"
heading="Any text"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
phone-image="Any valid image link"
phone-number="Any number"
website-image="Any valid image link"
website-text="Any text" >}}

The actual message goes here

{{< /map-full-screen >}}

Samples

Syntax

{{< map-location-address
address-image="Any valid image link"
address-text="Any text"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
email-id="Any valid email"
email-image="Any valid image link"
font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
map-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
phone-image="Any valid image link"
phone-number="Any number"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
website-image="Any valid image link"
website-text="Any text" >}}

The actual message goes here

{{< /map-location-address >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< number-with-details-item
card-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
item-data-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
item-data-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
item-data-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
item-heading="Any text"
item-heading-font-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
item-text="Any text"
link="Any valid http link" >}}

{{< /main-container >}}

Samples

Syntax

{{< people-list
facebook-image="Any valid image link"
facebook-link="Any valid http link"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
inner-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
inner-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
inner-section-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
linkedin-image="Any valid http link"
linkedin-link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
name="Any text"
name-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
outer-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
outer-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
outer-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
outer-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
paragraph-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
quotation-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
quotation-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
quotation-image="Any valid image link"
top-heading="Any text"
top-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
twitter-image="Any valid image link"
twitter-link="Any valid http link"
website-image="Any valid image link"
website-link="Any valid http link" >}}

The actual message goes here

{{< /people-list >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< product-listing-2-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-1="Any valid image link"
image-2="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
price-text="Any text"
price-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
price-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text="Any text"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /main-container >}}

Samples

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
data-auto-play-speed="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number"
is-data-arrows="true|false"
is-data-auto-play="true|false"
is-data-dots="true|false"
is-data-infinite="true|false"
is-data-variable-width="true|false"
is-full-width="true|false"
is-responsive="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< product-listing-3-item
image="Any valid image link"
image-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image-hover="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
price-text="Any text"
price-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
price-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text="Any text"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /carousel-container-multiple >}}

Samples

Syntax

{{< quote-1
author-company-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-company-link="Any valid http link"
author-designation-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-image="Any valid image link"
author-image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
author-image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
author-link="Any valid http link"
author-name="Any text"
author-name-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-left-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-left-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-right-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-right-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
company-name="Any text"
designation-text="Any text"
is-border-left="true|false"
is-border-right="true|false"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
quote-image-opacity="Any valid image link"
quote-image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-left-position-horizontal="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-left-position-vertical="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-right-position-horizontal="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-right-position-vertical="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
quote-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /quote-1 >}}

Samples

Syntax

{{< quote-2
author-company-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-company-link="Any valid http link"
author-company-name="Any text"
author-designation-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-designation-name="Any text"
author-image="Any valid image link"
author-image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
author-image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
author-link="Any valid http link"
author-name="Any text"
author-name-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-left-bottom-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-left-top-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-right-bottom-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-right-top-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-border-left-bottom="true|false"
is-border-left-top="true|false"
is-border-right-bottom="true|false"
is-border-right-top="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
quote-text="Any text"
quote-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
quote-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< quote-3-item
author-company-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-company-link="Any valid http link"
author-company-name="Any text"
author-designation-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-designation-name="Any text"
author-details-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
author-image="Any valid image link"
author-image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
author-image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
author-link="Any valid http link"
author-name="Any text"
author-name-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-open-in-new="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
quote-image="Any valid image link"
quote-image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-text="Any text"
quote-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
quote-text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
quote-text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

{{< /main-container >}}

Samples

Syntax

{{< rawhtml >}}

The actual message goes here

{{< /rawhtml >}}

Samples

Syntax

{{< reference
path="Relative path to any content in your website"
text="Any text" >}}

The actual message goes here

{{< /reference >}}

Samples

Syntax

{{< section-heading-1
heading-left="Any text"
heading-left-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-left-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-left-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-right-bottom="Any text"
heading-right-bottom-align-horizontal="Use left, center or right to align horizontally"
heading-right-bottom-align-vertical="Use top, center or bottom to align vertically"
heading-right-bottom-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-right-bottom-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-right-bottom-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-right-top="Any text"
heading-right-top-align-horizontal="Use left, center or right to align horizontally"
heading-right-top-align-vertical="Use top, center or bottom to align vertically"
heading-right-top-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-right-top-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-right-top-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image-left="Any valid image link"
image-right-bottom="Any valid image link"
image-right-top="Any valid image link"
is-left-section-flipped="true|false"
is-open-in-new="true|false"
left-top-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
link-1="Any valid http link"
link-2="Any valid http link"
link-3="Any valid http link"
overlay-left-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-right-bottom-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-right-top-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /section-heading-1 >}}

Samples

Syntax

{{< section-heading-2
heading="Any text"
heading-align-horizontal="Use left, center or right to align horizontally"
heading-align-vertical="Use top, center or bottom to align vertically"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-full-width="true|false"
is-image-tiled="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< section-heading-3-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /section-heading-3-item >}}

{{< /main-container >}}

Samples

Syntax

{{< section-image-expand-to-width-on-scroll
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-bottom-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-left-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading-right-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-text="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-top-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
image="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

Samples

Syntax

{{< section-with-both-side-list-container
heading="Any text"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< section-with-both-side-list-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
item-heading="Any text"
link="Any valid http link"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
paragraph-text="Any text"
paragraph-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< /section-with-both-side-list-container >}}

Samples

Syntax

{{< section-with-clean-description-container
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
topic-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
topic-highlight-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
topic-highlight-text="Any text"
topic-name="Any text" >}}

{{< section-with-clean-description-item
paragraph-heading="Any text"
paragraph-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
paragraph-heading-highlight-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
paragraph-heading-highlight-text="Any text" >}}

The actual message goes here

{{< /section-with-clean-description-item >}}

{{< /section-with-clean-description-container >}}

Samples

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
box-shadow="Add shadow effects (offset-x | offset-y | blur-radius | spread-radius | color). Ex. 2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

{{< section-with-colorful-cards-item
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-link="Any valid http link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
paragraph-text="Any text"
paragraph-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
tag-link="Any valid http link"
tag-name="Any text"
text-align="Any text" >}}

{{< /main-container >}}

Samples

Syntax

{{< section-with-image-and-description
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-align-horizontal="Use left, center or right to align horizontally"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-border-radius-small="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
subheading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
truncate-length="Any number" >}}

The actual message goes here

{{< /section-with-image-and-description >}}

Samples

Syntax

{{< section-with-image-on-left-title-description
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
text-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%" >}}

The actual message goes here

{{< /section-with-image-on-left-title-description >}}

Samples

Syntax

{{< section-with-image-title-description-2
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-border-radius-small="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-border-radius-small="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /section-with-image-title-description-2 >}}

Samples

Syntax

{{< section-with-image-title-description-5
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-name="Any text"
category-text="Any text"
category-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
subheading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /section-with-image-title-description-5 >}}

Samples

Syntax

{{< section-with-image-title-description-7
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-border-width="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
button-padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-text-hover-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
image="Any valid image link"
image-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
main-heading="Any text"
main-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
paragraph-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
paragraph-text="Any text"
sub-heading="Any text"
sub-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}