Syntax

{{< about
background-color="any background or gradient"
id="ID of any content in your website"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
map-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /about >}}

Syntax

{{< activity-container
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
icon-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
icon-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
timeline-border-style="solid|dotted|dashed"
timeline-border-width="Any valid number with unit like 10px or 10rem"
timeline-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
timeline-text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

{{< activity-item
activity-text="Any text"
activity-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
activity-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
activity-text-size="Any valid number with unit like 10px, 10rem or 50%"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
description-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, 10rem or 50%"
description-size="Any valid number with unit like 10px, 10rem or 50%"
image="Any valid image link"
is-description-bold="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
timeline-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
timeline-text="Any text" >}}

The actual message goes here

{{< /activity-item >}}

{{< /activity-container >}}

Syntax

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

The actual message goes here

{{< /alert >}}

Syntax

{{< animated-background
animation-duration="Any number in ms"
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 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 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 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 >}}

Syntax

{{< article-in-column-section
article-background-color="any background or gradient"
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 or 10rem"
article-column-count="Any number"
article-column-gap="Any value in px or %"
article-column-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
article-content-background-color="any background or gradient"
article-content-border-radius="Top, right, bottom, left property in px 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 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, 100vw, 10rem or 50%"
article-margin="Top, right, bottom, left property in px 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

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

Syntax

{{< avatar
background-color="any background or gradient"
badge-background-color="any background or gradient"
badge-size="Any valid number with unit like 10px, 10rem 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, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
size="Any valid number with unit like 10px, 10rem 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, 10rem or 50%" >}}

Syntax

{{< bar-container
background-color="any background or gradient"
bar-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

{{< bar-item
bar-background-color="any background or gradient"
bar-item-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
bar-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
text="Any text" >}}

The actual message goes here

{{< /bar-item >}}

{{< /bar-container >}}

Syntax

{{< breadcrumb-container
background-color="any background or gradient"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem 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 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 >}}

Syntax

{{< button
background-color="any background or gradient"
background-hover-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-hover-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 or 10rem"
button-style="default|success|warning|error"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-hover-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 >}}

Syntax

{{< back-to-top
active-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)"
align-horizontal="Use left, center or right to align horizontally"
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-active-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-active-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px or 10rem"
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)"
button-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
button-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
is-position-fixed="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /back-to-top >}}

Syntax

{{< button-custom
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /button-custom >}}

Syntax

{{< button-group-container
background-color="any background or gradient"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

{{< button-group-item
background-color="any background or gradient"
background-hover-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-hover-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 or 10rem"
button-style="default|success|warning|error"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-hover-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-group-item >}}

{{< /button-group-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-links-on-hover-item
background-color="any background or gradient"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
facebook-image="Any valid image link"
facebook-link="Any valid http link"
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"
link="Any valid http link"
linkedin-image="Any valid image link"
linkedin-link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-background-color="any background or gradient"
padding="Top, right, bottom, left property in px 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.)"
twitter-image="Any valid image link"
twitter-link="Any valid http link"
youtube-image="Any valid image link"
youtube-link="Any valid http link" >}}

The actual message goes here

{{< /card-with-image-and-links-on-hover-item >}}

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-3-items-show-details-on-hover-item
card-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
heading="Any text"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
image="Any valid image link"
is-open-in-new="true|false"
link="Any valid http link"
link-text="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-background-color="any background or gradient"
text-align-horizontal="Use left, right, center or justify to align text horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 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, 100vh, 10rem 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 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 background or gradient"
overlay-background-color-2="any background or gradient"
overlay-background-color-3="any background or gradient"
overlay-background-color-4="any background or gradient"
overlay-background-color-5="any background or gradient"
overlay-text-color-1="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-text-color-2="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-text-color-3="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-text-color-4="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
overlay-text-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" >}}

The actual message goes here

{{< /card-5-items-with-title-and-details-item >}}

{{< /main-container >}}

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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, right, center or justify to align text horizontally" >}}

The actual message goes here

{{< /card-5-items-with-title >}}

Syntax

{{< card-6-items-with-title
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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.)"
container-height="Any valid number with unit like 10px or 100vh"
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"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /card-6-items-with-title >}}

Syntax

{{< card-with-image-title-description-12
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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, 10rem or 50%"
description-size="Any valid number with unit like 10px, 10rem or 50%"
heading="Any text"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
image="Any valid image link"
image-radius="Top, right, bottom, left property in px 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
button-text="Any text"
card-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
details-border-radius="Top, right, bottom, left property in px 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, 100vw, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-height="Any valid number with unit like 10px, 100vh, 10rem 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 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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
button-background-hover-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.)"
button-text-hover-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 background or gradient"
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, 100vw, 10rem or 50%" >}}

The actual message goes here

{{< /card-4-items-with-title-and-link-item >}}

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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, 10rem or 50%"
card-heading-size="Any valid number with unit like 10px, 10rem or 50%"
card-number="Any number"
card-padding="Top, right, bottom, left property in px 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, 10rem or 50%"
card-paragraph-size="Any valid number with unit like 10px, 10rem 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, 10rem or 50%"
card-serial-size="Any valid number with unit like 10px, 10rem or 50%"
card-width="Any valid number with unit like 10px, 100vw, 10rem 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 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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="any background or gradient"
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 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 or 10rem"
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 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, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
card-width="Any valid number with unit like 10px, 100vw, 10rem 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 background or gradient"
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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vw, 10rem or 50%"
category-name="Any text"
facebook-link="Any valid http link"
gradient-background-color-bottom="any background or gradient"
gradient-background-color-top="any background or gradient"
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 background or gradient"
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" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="any background or gradient"
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, 100vw, 10rem 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.)" >}}

The actual message goes here

{{< /card-with-heading-subheading-button-item >}}

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
button-text="Any text"
button-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
description-font-line-height="Any valid number with unit like 10px, 10rem or 50%"
description-font-size="Any valid number with unit like 10px, 10rem or 50%"
facebook-icon-link="Any valid http link"
heading="Any text"
heading-font-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-font-size="Any valid number with unit like 10px, 10rem or 50%"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
icon-background-color="any background or gradient"
icon-hover-background-color="any background or gradient"
image-1="Any valid image link"
image-2="Any valid image link"
image-height="Any valid number with unit like 10px, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
move-icon-link="Any valid http link"
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sub-heading="Any text"
sub-heading-font-line-height="Any valid number with unit like 10px, 10rem or 50%"
sub-heading-font-size="Any valid number with unit like 10px, 10rem or 50%"
subheading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
twitter-icon-link="Any valid http link"
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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, 100vh, 10rem or 50%"
image="Any valid image link"
image-border-radius="Top, right, bottom, left property in px 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 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, 100vw, 10rem or 50%" >}}

The actual message goes here

{{< /card-with-title-link-and-reveal-item >}}

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
card-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
card-radius="Top, right, bottom, left property in px 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, 100vw, 10rem or 50%"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link" >}}

The actual message goes here

{{< /card-with-icon-and-text-item >}}

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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, 100vh, 10rem 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 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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vh, 10rem 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 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 100vh, 10rem 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" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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, 100vh, 10rem 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
border-radius="Top, right, bottom, left property in px 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, right, center or justify to align text 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-15-item
background-color="any background or gradient"
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 or 10rem"
button-background-color="any background or gradient"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
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.)"
button-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
button-text-size="Any valid number with unit like 10px, 10rem or 50%"
button-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
heading="Any text"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
hover-border-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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-gap="Any value in px or %"
image-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
is-open-in-new="true|false"
is-portrait="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
max-price-text="Any text"
min-price-text="Any text"
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
price-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
price-line-height="Any valid number with unit like 10px, 10rem or 50%"
price-size="Any valid number with unit like 10px, 10rem or 50%"
text-align="Any text"
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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%"
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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 background or gradient"
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, 100vh, 10rem 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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-14-item
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px or 10rem"
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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.)"
date-background-color="any background or gradient"
date-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
date-number="Any number"
heading="Any text"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image="Any valid image link"
is-open-in-new="true|false"
is-stretch-evenly="true|false"
link="Any valid http link"
month-name="Any text"
overlay-background-color="any background or gradient"
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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-13-item
background-color="any background or gradient"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px or 10rem"
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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.)"
delete-text="Any text"
delete-text-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-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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.)"
rating-text="Any text"
rating-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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

{{< /main-container >}}

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 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="Path to any content in your website"
link-address-1="Any valid http link"
link-address-2="Any valid http link"
list-arrow-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-arrow-image="Any valid image link"
list-arrow-style="s-1|s-2|s-3|...|s-7"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-content-path="Path to any content in your website" >}}

The actual message goes here

{{< /card-with-text-on-both-sides >}}

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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
border-width="Any valid number with unit like 10px or 10rem"
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, 10rem or 50%"
description-size="Any valid number with unit like 10px, 10rem 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, 10rem 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 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, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

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

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

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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" >}}

The actual message goes here

{{< /card-with-video-and-text-item >}}

{{< /main-container >}}

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 background or gradient"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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, 100vh, 10rem or 50%"
image-width="Any valid number with unit like 10px, 100vw, 10rem 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, right, center or justify to align text 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, 10rem or 50%"
text-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

The actual message goes here

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

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

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 background or gradient"
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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 in ms"
data-responsive-count="Any number"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-arrow-image="Any valid image link"
list-arrow-style="s-1|s-2|s-3|...|s-7"
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, 10rem or 50%"
list-text-size="Any valid number with unit like 10px, 10rem or 50%"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 >}}

Syntax

{{< carousel-container-single
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
data-auto-play-speed="Any number in ms"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

{{< carousel-with-single-card-2-item
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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, 100vh, 10rem or 50%"
is-open-in-new="true|false"
link="Any valid http link"
text-align-horizontal="Use left, right, center or justify to align text horizontally"
text-background-color="any background or gradient"
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.)" >}}

The actual message goes here

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

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

Syntax

{{< carousel-container-single
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
data-auto-play-speed="Any number in ms"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

{{< carousel-with-single-card-1-item
background-color="any background or gradient"
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, 100vh, 10rem or 50%"
is-open-in-new="true|false"
link="Any valid http link" >}}

The actual message goes here

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

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

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
data-auto-play-speed="Any number in ms"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-multiple-cards-1-item
content-background-color="any background or gradient"
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, 100vh, 10rem 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.)" >}}

The actual message goes here

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

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

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
data-auto-play-speed="Any number in ms"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 background or gradient"
circle-box-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
circle-box-width="Any valid number with unit like 10px, 100vw, 10rem 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, 10rem or 50%"
circle-text-size="Any valid number with unit like 10px, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-background-color="any background or gradient"
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, 100vw, 10rem or 50%" >}}

The actual message goes here

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

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

Syntax

{{< carousel-container-multiple
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
data-auto-play-speed="Any number in ms"
data-slide-to-scroll-count="Any number"
data-slide-to-show-count="Any number"
data-speed="Any number in ms"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< carousel-with-multiple-cards-3-item
background-color="any background or gradient"
content-background-color="any background or gradient"
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, 100vh, 10rem or 50%"
is-open-in-new="true|false"
link="Any valid http link"
tags="Comma seperated values"
tags-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 >}}

Syntax

{{< main-container
align-vertical="Use top, center or bottom to align vertically"
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px 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)"
id="ID of any content in your website"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px or %"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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.)" >}}

{{< circle-bar-with-title-description-item
circle-background-color="any background or gradient"
circle-border-primary-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
circle-border-secondary-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
circle-border-width="Any valid number with unit like 10px or 10rem"
circle-percent-number="Any number"
circle-size="Any valid number with unit like 10px, 10rem or 50%"
heading="Any text"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
is-border-double="true|false"
margin="Top, right, bottom, left property in px 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, 10rem or 50%"
sub-heading-size="Any valid number with unit like 10px, 10rem or 50%"
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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

The actual message goes here

{{< /circle-bar-with-title-description-item >}}

{{< /main-container >}}

Syntax

{{< compare-container
background-color="any background or gradient"
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 or 10rem"
heading-background-color="any background or gradient"
heading-left="Any text"
heading-right="Any text"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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 or 10rem"
button-background-color="any background or gradient"
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 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-background-color="any background or gradient"
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 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, 100vh, 10rem or 50%"
image-heading-right="Any valid image link"
image-heading-right-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image-item-left="Any valid image link"
image-item-margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-item-right="Any valid image link"
image-left-size="Any valid number with unit like 10px, 10rem or 50%"
image-right-size="Any valid number with unit like 10px, 10rem or 50%"
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 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, 10rem or 50%"
text-margin="Top, right, bottom, left property in px 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, 10rem or 50%" >}}

The actual message goes here

{{< /compare-item >}}

{{< /compare-container >}}

Syntax

{{< content-and-image-in-column-section
background-color="any background or gradient"
content-align-vertical="Use top, center or bottom to align vertically"
content-image="Any valid image link"
content-image-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
content-image-size="Any valid number with unit like 10px, 10rem 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-height="Any valid number with unit like 10px, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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-text="Any text"
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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

The actual message goes here

{{< /content-and-image-in-column-section >}}

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 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 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 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

{{< /countdown-1 >}}

Syntax

{{< countdown-3
add-days-count="Any number"
background-color="any background or gradient"
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 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

{{< /countdown-3 >}}

Syntax

{{< countdown-2
add-days-count="Any number"
background-color="any background or gradient"
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 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

{{< /countdown-2 >}}

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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
height="Any valid number with unit like 10px, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

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

Syntax

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

The actual message goes here

{{< /downloads >}}

Syntax

{{< featured-posts
arrow-style="s-none|s-1|s-2|s-3|s-4|s-5"
background-color="any background or gradient"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
play-speed-in-ms="Any number in ms"
post-ids="IDs of the content separated by | character"
slide-to-scroll-count="Any number"
slide-to-show-count="Any number"
sliding-speed-in-ms="Any number in ms"
text-background-color="any background or gradient"
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

The actual message goes here

{{< /featured-posts >}}

Syntax

{{< latest-posts
count="Any number"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /latest-posts >}}

Syntax

{{< featured-authors
author-ids="IDs of the content separated by | character"
count="Any number"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /featured-authors >}}

Syntax

{{< featured-series
count="Any number"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
series-ids="IDs of the content separated by | character" >}}

The actual message goes here

{{< /featured-series >}}

Syntax

{{< featured-tags
count="Any number"
is-full-width="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
tag-ids="IDs of the content separated by | character" >}}

The actual message goes here

{{< /featured-tags >}}

Syntax

{{< flexible-grid-container
background-color="any background or gradient"
is-full-width="true|false"
item-number="Any number"
items-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
lg-item-number="Any number"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
md-item-number="Any number"
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
sm-item-number="Any number"
xs-item-number="Any number" >}}

{{< flexible-grid-item
background-color="any background or gradient"
facebook-link="Any valid http link"
facebook-text="Any text"
header-text="Any text"
header-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
header-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
header-text-size="Any valid number with unit like 10px, 10rem or 50%"
image="Any valid image link"
image-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
is-hover="true|false"
is-separator="true|false"
separator-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
separator-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
sub-header-text="Any text"
sub-header-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
sub-header-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
sub-header-text-size="Any valid number with unit like 10px, 10rem or 50%"
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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%"
twitter-link="Any valid http link"
twitter-text="Any text" >}}

The actual message goes here

{{< /flexible-grid-item >}}

{{< /flexible-grid-container >}}

Syntax

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

The actual message goes here

{{< /fragment >}}

Syntax

{{< social-service-container
align-horizontal="Use left, center or right to align horizontally"
align-vertical="Use top, center or bottom to align vertically"
is-position-fixed="true|false"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< social-service-item
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
header-text="Any text"
header-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
hover-background-color="any background or gradient"
image="Any valid image link"
image-background-color="any background or gradient"
image-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
image-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /social-service-item >}}

{{< /social-service-container >}}

Syntax

{{< heading
background-color="any background or gradient"
heading-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, right, center or justify to align text horizontally"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /heading >}}

Syntax

{{< hero-section-with-background-and-content-3
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="any background or gradient"
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 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 or 10rem"
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 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-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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
height="Any valid number with unit like 10px, 100vh, 10rem 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

The actual message goes here

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

Syntax

{{< section-with-title-subtitle-link
background-color="any background or gradient"
button-background-color="any background or gradient"
button-background-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 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.)"
gradient-angle="Any number"
gradient-length="Any number"
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-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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-alignment="Any text"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /section-with-title-subtitle-link >}}

Syntax

{{< hero-section-with-background-and-content
button-background-color="any background or gradient"
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 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 or 10rem"
button-padding="Top, right, bottom, left property in px 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.)"
container-height="Any valid number with unit like 10px or 100vh"
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 background or gradient"
content-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
content-bottom-length="Any number"
content-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
content-left-length="Any number"
content-padding="Top, right, bottom, left property in px 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, 100vw, 10rem 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, 10rem or 50%"
heading-text-size="Any valid number with unit like 10px, 10rem or 50%"
id="ID of any content in your website"
image="Any valid image link"
is-background-repeated="true|false"
is-content-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
list-arrow-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-arrow-image="Any valid image link"
list-arrow-style="s-1|s-2|s-3|...|s-7"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-background-color="any background or gradient"
overlay-height="Any valid number with unit like 10px, 100vh, 10rem 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, 100vw, 10rem or 50%"
sub-heading="Any text"
sub-heading-background-color="any background or gradient"
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, 10rem or 50%"
sub-heading-text-size="Any valid number with unit like 10px, 10rem or 50%"
text-align-horizontal="Use left, right, center or justify to align text 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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
typing-delay-duration="Any number in ms"
typing-pause-after-last-text-finishes="Any text"
typing-pause-duration-before-repeat="Any number in ms"
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 >}}

Syntax

{{< hero-section-with-background-and-content-2
background-color="any background or gradient"
background-image="Any valid image link"
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 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 or 10rem"
bottom-background-color="any background or gradient"
button-background-color="any background or gradient"
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 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 or 10rem"
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 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-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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image="Any valid image link"
is-animation="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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%"
video-link="Any valid http link" >}}

The actual message goes here

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

Syntax

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

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-full-width="true|false"
is-open-in-new="true|false"
left-background-color="any background or gradient"
left-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
left-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
left-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
link="Any valid http link"
list-arrow-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
list-arrow-image="Any valid image link"
list-arrow-style="s-1|s-2|s-3|...|s-7"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-background-color="any background or gradient"
right-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
right-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
right-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
right-width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

The actual message goes here

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

Syntax

{{< hero-section-with-background-and-content-4
background-color="any background or gradient"
border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-background-color="any background or gradient"
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 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 or 10rem"
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 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.)"
button-text-line-height="Any valid number with unit like 10px, 10rem or 50%"
button-text-size="Any valid number with unit like 10px, 10rem or 50%"
container-align-horizontal="Use left, center or right to align horizontally"
content-background-color="any background or gradient"
content-container-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
curve-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-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
id="ID of any content in your website"
image="Any valid image link"
is-bottom-curved="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
is-top-curved="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-align-horizontal="Use left, right, center or justify to align text 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%" >}}

The actual message goes here

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

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 background or gradient"
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, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
heading-width="Any valid number with unit like 10px, 100vw, 10rem 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 background or gradient"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
path="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, 10rem or 50%"
sub-heading-size="Any valid number with unit like 10px, 10rem 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, 100vh, 10rem or 50%"
underline-width="Any valid number with unit like 10px, 100vw, 10rem 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, 10rem or 50%"
item-suffix-size="Any valid number with unit like 10px, 10rem 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, 10rem or 50%"
item-text-size="Any valid number with unit like 10px, 10rem or 50%"
link="Any valid http link"
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

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

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

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 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 or 10rem"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image="Any valid image link"
image-fit="fill = Container is resized, contain = Resized to fit based on aspect ratio, cover = Resized to fill container"
is-description-before-image="true|false"
is-description-visible="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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text="Any text"
text-align-horizontal="Use left, right, center or justify to align text horizontally"
width="Any valid number with unit like 10px, 100vw, 10rem or 50%" >}}

The actual message goes here

{{< /image >}}

Syntax

{{< image-grid
button-background-color="any background or gradient"
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /image-grid >}}

Syntax

{{< image-showcase-container
column-count="Any number"
column-gap="Any value in px or %"
container-overlay-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-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
id="ID of any content in your website"
image="Any valid image link"
is-full-width="true|false"
item-background-color="any background or gradient"
item-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
item-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)"
item-hover-background-color="any background or gradient"
item-hover-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)"
item-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

{{< image-showcase-item
image="Any valid image link"
is-open-in-new="true|false" >}}

{{< /image-showcase-container >}}

Syntax

{{< list-cards-with-actions
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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
card-background-color="any background or gradient"
card-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
card-hover-background-color="any background or gradient"
card-width="Any valid number with unit like 10px, 100vw, 10rem or 50%"
container-background-color="any background or gradient"
container-background-image="Any valid image link"
heading="Any text"
heading-align-horizontal="Use left, center or right to align horizontally"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-hover-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 or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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

{{< /list-cards-with-actions >}}

Syntax

{{< map-full-screen
address-image="Any valid image link"
address-text="Any text"
background-color="any background or gradient"
email-id="Any valid email"
email-image="Any valid image link"
heading="Any text"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
is-full-width="true|false"
is-open-in-new="true|false"
map-link="Any valid map link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
margin-map="Top, right, bottom, left property in px 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 >}}

Syntax

{{< map-location-address
address-image="Any valid image link"
address-text="Any text"
background-color="any background or gradient"
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"
map-height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
map-link="Any valid map link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px 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, 10rem or 50%"
text-size="Any valid number with unit like 10px, 10rem or 50%"
website-image="Any valid image link"
website-text="Any text" >}}