Widgets - All

A widget is a simplified code that you can use in markdown to get sophisticated output. Here is a list of supported widgets with BakeMyWeb.

Activity

Show details...

Syntax

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

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

The actual message goes here

{{< /activity-item >}}

{{< /main-container >}}

Samples

Authoring History

Alerts

Alerts provide contextual feedback about the content and improve readability if used well. It also helps in reinforcing important points that you want to highlight.

Show details...

Syntax

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

The actual message goes here

{{< /alert >}}

Samples

error: Something went wrong

This is the worst error message a server could throw!

tip: Useful tips are nice

A tip is a small but useful piece of practical advice.

Useful tips are nice A tip is a small but useful piece of practical advice.
warning: Warning

Most users skim content while reading. A gentle warning is good if you think they can hurt themselves by skimming content.

info: Do you know?

A generic information can be useful to highlight a point you want to make.

note: Things worth remembering

A note is a useful information that is worth remembering.

Animated Background

An animated background changes color from one color to another infinitely. Provide some padding, add some texts and change the colors to your liking and boom... your animated gradient is ready!

Show details...

Syntax

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

The actual message goes here

{{< /animated-background >}}

Samples

I don’t try to intimidate anybody before a fight. That’s nonsense. I intimidate people by hitting them. 🔥

Mike Tyson

I don’t try to intimidate anybody before a fight. That’s nonsense. I intimidate people by hitting them. 🔥

Mike Tyson

Article in column section

Show details...

Syntax

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

The actual message goes here

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

Samples

Muffin gingerbread jelly tootsie roll chocolate bar sugar plum biscuit. Tiramisu cheesecake sesame snaps muffin cheesecake bear claw. Tiramisu gummies gingerbread gingerbread gummi bears. Cupcake brownie bear claw ice cream carrot cake shortbread wafer. Danish cotton candy jelly wafer sesame snaps pie cupcake. Sweet roll bear claw gummies marzipan jujubes halvah dragée oat cake. Liquorice topping icing jelly-o dragée fruitcake carrot cake cake. Liquorice dessert fruitcake croissant lollipop croissant sweet roll bonbon cupcake. Jelly-o sweet roll gummies cake cupcake liquorice marzipan pastry macaroon. Gummies soufflé cookie shortbread chocolate bar marzipan chocolate biscuit. Cupcake pie cotton candy carrot cake pastry. Pie sweet roll chocolate pie cake sweet topping cookie. Pudding pudding cookie tiramisu brownie.

Liquorice icing lollipop caramels marshmallow candy sweet roll sweet. Macaroon lemon drops candy powder marzipan. Marshmallow topping sesame snaps jelly-o candy canes dragée sugar plum. Liquorice chupa chups cotton candy gummi bears lemon drops toffee marshmallow chocolate cake. Powder bear claw croissant soufflé liquorice apple pie sesame snaps. Candy cupcake tart pastry sesame snaps. Fruitcake chocolate cake fruitcake sesame snaps bear claw.

Tootsie roll gummies carrot cake cotton candy pie liquorice. Sweet liquorice tootsie roll chocolate jelly tootsie roll cake. Bear claw chocolate soufflé danish powder dessert brownie. Jelly-o sugar plum marshmallow muffin ice cream icing liquorice powder. Cotton candy cookie cotton candy lemon drops lollipop marzipan biscuit.

Marzipan chocolate bar

Marzipan chocolate bar powder apple pie oat cake soufflé. Jelly beans marzipan cupcake jujubes carrot cake. Caramels dessert candy tootsie roll chocolate cake muffin halvah toffee. Bonbon sugar plum danish caramels pudding chupa chups. Gingerbread biscuit jelly-o jelly-o tart. Tiramisu sweet bonbon marzipan brownie chocolate.

Shortbread Apple Pie Cupcake

Shortbread apple pie cupcake icing jelly muffin chocolate bear claw. Sweet roll marshmallow sesame snaps tiramisu shortbread cake. Danish shortbread sesame snaps tart sweet sweet dragée liquorice. Caramels cheesecake liquorice tiramisu icing. Sweet roll gingerbread cake bear claw bear claw danish sweet roll chocolate cake cupcake. Chocolate sesame snaps lollipop jelly lollipop topping. Dragée chocolate bar pastry bonbon powder liquorice powder. Lemon drops dragée topping toffee toffee powder candy. Sesame snaps brownie apple pie oat cake donut macaroon dessert shortbread chocolate cake. Brownie jelly jujubes halvah candy muffin carrot cake. Icing jelly-o tootsie roll icing apple pie toffee.


How about the Bear?

Gummi bears shortbread gummi bears lemon drops marshmallow cheesecake. Cake fruitcake cotton candy chocolate bar cake sweet roll tootsie roll sweet. Tootsie roll chupa chups cake pudding cheesecake oat cake oat cake bonbon powder. Cotton candy muffin shortbread cake brownie gummies tart. Topping soufflé sesame snaps jelly-o marzipan jelly dragée macaroon. Sweet roll jelly beans chocolate cake chocolate bar fruitcake jujubes cookie chocolate. Jelly beans jelly-o jelly fruitcake lemon drops gummies.

Avatar

An Avatar shows an image in a circle with a badge if data is provided. If you don't have an image, you can provide a small text. Badge supports linking as well.

Show details...

Syntax

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

The actual message goes here

{{< /avatar >}}

Samples

Bar

A bar component can be used to show linear progress and is useful in scenarios where you want to show progress. You can use colors for each section.

Show details...

Syntax

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

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

The actual message goes here

{{< /bar-item >}}

{{< /bar-container >}}

Samples

50%
30%
20%

Breadcrumb

If a website has many pages, breadcrumb navigation can greatly enhance the way users find their way around. Breadcrumb is a secondary navigation feature for your viewers. It helps reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.

Show details...

Syntax

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

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

The actual message goes here

{{< /breadcrumb-item >}}

{{< /breadcrumb-container >}}

Samples

Button

BakeMyWeb supports various kinds of buttons and every kind is customisable. If you provide a link that starts with http, it assumes that the link is external, and hence opens the link in a new tab.

Show details...

Syntax

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

The actual message goes here

{{< /button >}}

Samples

Default Primary Success Error Link

Button Custom

BakeMyWeb supports various kinds of buttons and every kind is customisable. If you provide a link that starts with http, it assumes that the link is external, and hence opens the link in a new tab.

Show details...

Syntax

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

The actual message goes here

{{< /button-custom >}}

Samples

Click Me

Button Group

A button group uses the same set of buttons, but it styles them together so that they don't have gaps in between. Rest of the functionality remains the same.

Show details...

Syntax

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

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

The actual message goes here

{{< /button >}}

{{< /button-container >}}

Samples

Card that has 4 items with title and link

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card that has 5 items with title

Show details...

Syntax

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

The actual message goes here

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

Samples

Card that has 5 items with title and details

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Sponge Cake

Sponge cakes (or foam cakes) are made from whipped eggs, sugar, and flour. Traditional sponge cakes are leavened only with eggs. They rely primarily on trapped air in a protein matrix (generally of beaten eggs) to provide leavening, sometimes with a bit of baking powder or other chemical leaven added. Egg-leavened sponge cakes are thought to be the oldest cakes made without yeast. Angel food cake is a white cake that uses only the whites of the eggs and is traditionally baked in a tube pan. The French Génoise is a sponge cake that includes clarified butter. Highly decorated sponge cakes with lavish toppings are sometimes called gateau, the French word for cake. Chiffon cakes are sponge cakes with vegetable oil, which adds moistness

Butter Cake

Butter cakes are made from creamed butter, sugar, eggs, and flour. They rely on the combination of butter and sugar beaten for an extended time to incorporate air into the batter. A classic pound cake is made with a pound each of butter, sugar, eggs, and flour.

Egg Cake

Egg cakes are made with one egg. They can be made with butter[17] or vegetable shortening.[18] One egg cake was an economical recipe when using two eggs for each cake was too costly.

Coffee Cake

Coffee cake is generally thought of as a cake to serve with coffee or tea at breakfast or a coffee break. Some types use yeast as a leavening agent while others use baking soda or baking powder. These cakes often have a crumb topping called streusel or a light glaze drizzle.

Chocolate Cake

Chocolate cakes are butter cakes, sponge cakes, or other cakes flavored with melted chocolate or cocoa powder.[16] German chocolate cake is a variety of chocolate cake. Fudge cakes are chocolate cakes that contain fudge.

Sponge Cake

Sponge cakes (or foam cakes) are made from whipped eggs, sugar, and flour. Traditional sponge cakes are leavened only with eggs.

Butter Cake

Butter cakes are made from creamed butter, sugar, eggs, and flour.

Egg Cake

Egg cakes are made with one egg. They can be made with butter or vegetable shortening.

Coffee Cake

Coffee cake is generally thought of as a cake to serve with coffee or tea at breakfast or a coffee break.

Chocolate Cake

Chocolate cakes are butter cakes, sponge cakes, or other cakes flavored with melted chocolate or cocoa powder.

Card that has 6 items with title

Show details...

Syntax

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

The actual message goes here

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

Samples

Card that shows details on hover or click

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with changing images on hover

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Frosted Cup Cake

Fluffy whipped cream and cream cheese frosting

Rs.500

Designer Cup Cake

A cupcake is a small, sweet baked good topped with frosting.

Rs.250

Pink Cup Cake

We've created a guide of cake frosting types to help you understand their differences and find the best one for your culinary creations!

$78.00

Card with circular image title description

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Chocolate cupcake

Chocolate cupcake

Buttercream Flowers is one of the easiest and the prettiest way to decorate your cakes or cupcakes

Read more...

Cupcake

Cupcake

A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips

Read more...

Blueberry Cupcake

Blueberry Cupcake

These blueberry cupcakes are breakfast for dessert. Fresh blueberries are mixed into vanilla cake -- rather than muffin -- batter, which is then topped with cinnamon streusel and swirls of blueberry-cream cheese icing. This recipe appeared in episode 308 of Martha Bakes.

Read more...

Card with heading sub-heading and button

Show details...

Syntax

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

The actual message goes here

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

Samples

Card with icon and text

Show details...

Syntax

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

The actual message goes here

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

Samples

Card with image and details as overlay

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with image tags and details

Show details...

Syntax

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

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

Samples

Frosted cake

A standard cupcake uses the same basic ingredients as standard-sized cakes

Designer cup cake

These blueberry cupcakes are breakfast for dessert.

Choco Delite

Fluffy whipped chocolate cheese frosting

Tangy Orange

I love liquorice toffee croissant lemon drops croissant.

Card with image title description 1

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Style 1

Candy gingerbread topping I love liquorice toffee croissant lemon drops croissant.

read more...

Style 2

Liquorice toffee croissant lemon shortbread jujubes tiramisu.

read more...

Style 3

Shortbread jelly pudding I love pudding shortbread jujubes tiramisu.

read more...

Card with image title description 10

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Margarita Cup Cakes

Cakes are the best dessert to exist, they are the main event on every special occasion. And not only that they manage to turn any ordinary day into a special day.

Funfetti Cup Cakes

The best thing about eating a cake is that calories are the last thing that you have to worry about. The first thing is saving it all for yourself.

Choco Cup cakes with Espresso Frosting

Cake is happiness! If you know the way of the cake, you know the way of happiness! If you have a cake in front of you, you should not look any further for joy!

Card with image title description 11

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Funfetti Cup Cakes

Cakes are special. Every birthday, every celebration ends with something sweet, a cake, and people remember. It’s all about the memories. Cakes are special. Every birthday, every celebration ends with something sweet, a cake, and people remember. It’s all about the memories.

White Forest Cup Cakes

It’s fine to eat dessert when I want to eat dessert because that will give me the peace of mind I need. I’ll know that if I ate chocolate cake, maybe I won’t the next day.

Chocolates and Cakes

The best thing about eating a cake is that calories are the last thing that you have to worry about. The first thing is saving it all for yourself. .

Card with image title description 12

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Red Velvet Cup Cakes


Fruit Cakes with Strawberry

Fruitcake is a cake made with candied or dried fruit, nuts, and spices, and optionally soaked in spirits. In the United Kingdom, certain rich versions may be iced and decorated.Fruitcakes are typically served in celebration of weddings and Christmas. Given their rich nature, fruitcakes are most often consumed on their own, as opposed to with condiments


Tutti Frutti Pie

This Tutti Frutti cake has all the goodness of a perfectly baked spongy vanilla cake. If you are looking for an easy Tea time cake recipe then, make this spongy, airy, fluffy, tender, moist bakery style Tutti Frutti Cake with the help of my Step By Step method. Packed with Colorful candied papaya bits, this spongy Tutty Fruity cake won't fail you a single time.


Card with image title description 2

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

...

Cream Cake

Jam-packed with juicy berries, these strawberry muffins with crisp, golden tops are as pretty as they are delicious.

(read more)

Cream Cake

Vanilla Muffins is light fluffy and tasty for breakfast or for snack.💓

(read more)

Chocolate Cake

Super moist with cocoa powder, chocolate chips add a huge dose of chocolaty goodness.

(read more)

Card with image title description 4

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Vanilla Cupcake

Vanilla Muffins is light fluffy and tasty for breakfast or for snack.💓

Buy Now

Strawberry Delite

Buy 1, Get 1

Jam-packed with juicy berries, these strawberry muffins with crisp, golden tops are as pretty as they are delicious.

Buy Now

Choco Delite

Super moist with cocoa powder, chocolate chips add a huge dose of chocolaty goodness.

Buy Now

Card with image title description 5

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with image title description 6

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with image title description 7

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Strawberry muffins ❤️

Jam-packed with juicy berries, these strawberry muffins with crisp, golden tops are as pretty as they are delicious.

Read More
Vanilla Muffins

Vanilla Muffins is light fluffy and tasty for breakfast or for snack.

Read More
Moist Chocolate Muffins

Super moist with cocoa powder, chocolate chips add a huge dose of chocolaty goodness.

Read More

Card with image title description 8

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with image title description 9

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with numbered text

Card that contains heading and texts.

Show details...

Syntax

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

The actual message goes here

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

Samples

01.

Vanilla Muffin

Vanilla Muffins is light fluffy and tasty for breakfast or for snack.

02.

Strawberry muffin

Jam-packed with juicy berries, these strawberry muffins with crisp, golden tops are as pretty as they are delicious.

03.

Choco Layer Cake

Super moist with cocoa powder, chocolate chips add a huge dose of chocolaty goodness.

Card with social icons

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Book a Tour

Fill up the form

Book a Tour

Fill up the form

Card with text on both sides

Show details...

Syntax

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

The actual message goes here

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

Samples

Cup Cake

This Chocolate Cupcake recipe is so easy and the results are amazing every time.

Easy Chocolate Cupcake Recipe

First, this recipe is SO EASY! Simply mix the dry ingredients, then mix the wet ingredients, and whisk them together. They bake up with a beautiful domed top. These chocolate cupcakes are moist and fluffy at the same time with a tender crumb.

Read more...

Chocolate Buttercream Frosting

This Chocolate Cupcake recipe is so easy and the results are amazing every time. Top them with our 6-minute Chocolate Buttercream Frosting and you have the ultimate chocolate lovers cupcake! Watch the video tutorial and see how easy it is. We love homemade cupcake recipes from Vanilla Cupcakes to Pumpkin Cupcakes. They are always the first dessert to disappear at birthday parties.

Read more...

Card with title link and reveal item

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

Card with video and text

Show details...

Syntax

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

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

The actual message goes here

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

{{< /main-container >}}

Samples

The Most AMAZING Vanilla cake Recipe

Made from scratch with only a handful of ingredients, this Vanilla Cake Recipe is the perfect dessert for any occasion. Far from boring, this classic cake is flavorful and has a tender and moist crumb. It’s so light, fluffy, and easy to make that you’ll never go back to box mix!

Read more...

The Only APPLE PIE Recipe You'll Need

Everyone has to make this Classic Apple Pie Recipe for Thanksgiving! You will love the flaky pie crust and the apple pie filling will surprise you!

Read more...

Amazing Cupcake Decorating Ideas Compilation For Party

Awesome cupcake decorating ideas for your next batch of delicious cupcakes!

Read more...

Carousel with custom list items heading and button

Show details...

Syntax

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

The actual message goes here

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

Samples

Carousel with multiple cards 1

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Carousel with multiple cards 2

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Carousel with multiple cards 3

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Carousel with single card 1

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Carousel with single card 2

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Carousel with thumbnail images

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Compare

Compare

Show details...

Syntax

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

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

The actual message goes here

{{< /compare-item >}}

{{< /compare-container >}}

Samples

What's the difference between Cupcake and Muffin?

Both are tasty, of course! But there is still a difference and this comparison should help clarify the differences.

Cupcake

Muffin

image
image

Has Frosting

No Frosting

Summary

17.00cm

17.00cm

(6.7”) Super Retina XDR display

(6.7”) Super Retina XDR display

ProMotion technology

ProMotion technology

Always-On display

Always-On display

Dynamic Island

image

Dynamic Island

A new way to interact with iPhone

A new way to interact with iPhone

Emergency SOS

image

Emergency SOS

Crash Detection

Crash Detection

6x

6x

Optical zoom range

Optical zoom range

Up to 29 hours video playback

image

Up to 29 hours video playback

Face ID

image

Face ID

Capacity

128GB

128GB

256GB

256GB

1TB

1TB

Display

Super Retina XDR display

Super Retina XDR display

17.00 cm / 6.7-inch (diagonal)

17.00 cm / 6.7-inch (diagonal)

Dynamic Island

Dynamic Island

Countdown 1

Show details...

Syntax

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

The actual message goes here

{{< /countdown-1 >}}

Samples

Loading...

Loading...

Loading...

Countdown 2

Show details...

Syntax

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

The actual message goes here

{{< /countdown-2 >}}

Samples

Loading...

Loading...

Loading...

Countdown 3

Show details...

Syntax

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

The actual message goes here

{{< /countdown-3 >}}

Samples

Loading...

Loading...

Loading...

Countdown 4

Show details...

Syntax

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

The actual message goes here

{{< /countdown-4 >}}

Samples

Loading...

Loading...

Loading...

Details

Show details...

Syntax

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

The actual message goes here

{{< /details >}}

Samples

left border style
ext ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sve centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
Heading
left border style
Heading
left border stylepx
Heading
left border style
Heading
left border style
Heading
left border style
Heading
Top border Style
Heading
Top border Style
Heading
Bottom border Style
Heading
Normal Style
Heading
Normal Style
Heading
Normal Style

Downloads

Show details...

Syntax

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

The actual message goes here

{{< /downloads >}}

Samples

Feature Posts

Show details...

Syntax

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

The actual message goes here

{{< /feature-posts >}}

Samples

Get content from any valid page

Get Page

Show details...

Syntax

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

The actual message goes here

{{< /get-page >}}

Samples

Chocolate Buttercream Frosting

This Chocolate Cupcake recipe is so easy and the results are amazing every time. Top them with our 6-minute Chocolate Buttercream Frosting and you have the ultimate chocolate lovers cupcake! Watch the video tutorial and see how easy it is. We love homemade cupcake recipes from Vanilla Cupcakes to Pumpkin Cupcakes. They are always the first dessert to disappear at birthday parties.

➡️ This is additional text. 👍

Gradient background

Show details...

Syntax

{{< gradient-background
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
gradient="any background or gradient"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /gradient-background >}}

Samples

Heading

Show details...

Syntax

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

The actual message goes here

{{< /heading >}}

Samples

Hero Section 1

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Hero section with background and content

Show details...

Syntax

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

The actual message goes here

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

Samples

Cake 🍰 is yummy! 

Don’t wait until it’s too late. Eat that slice of cake!

  • A bite of deliciousness.😋
  • A little bliss in every bite.
  • A slice of my life is but a piece of cake.
  • All you need is love. ...
  • Birthday cake calories don't count.
  • Bakers make the world smell better.
Book Now

Cake 🍰 is yummy! 

Don’t wait until it’s too late. Eat that slice of cake!

  • A bite of deliciousness.😋
  • A little bliss in every bite.
  • A slice of my life is but a piece of cake.
  • All you need is love. ...
  • Birthday cake calories don't count.
  • Bakers make the world smell better.
Buy Now

Cake 🍰 is yummy! 

Don’t wait until it’s too late. Eat that slice of cake!

  • A bite of deliciousness.😋
  • A little bliss in every bite.
  • A slice of my life is but a piece of cake.
  • All you need is love. ...
  • Birthday cake calories don't count.
  • Bakers make the world smell better.
Buy Now

Cake 🍰 is yummy! 

Don’t wait until it’s too late. Eat that slice of cake!

  • A bite of deliciousness.😋
  • A little bliss in every bite.
  • A slice of my life is but a piece of cake.
  • All you need is love. ...
  • Birthday cake calories don't count.
  • Bakers make the world smell better.
Buy Now

Hero section with background image text

Show details...

Syntax

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

The actual message goes here

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

Samples

This is sample heading

We help businesses grow, launch products and gain a competitive advantage in today’s digital-led world. It is one of the most frequently asked questions on the internet. Digitalization means transforming any business into a digital business using digital technologies. The main purpose of digitalization is to generate higher revenue and create new value-added opportunities. At present, many companies are in the process of digitization. Top businesses have already done this technique and are very successful in economic, financial, and customer satisfaction.We help businesses grow, launch products and gain a competitive advantage in today’s digital-led world. It is one of the most frequently asked questions on the internet.

  • Cake Sample 1
  • Cake Sample 2

Hero section with full screen

Show details...

Syntax

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

The actual message goes here

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

Samples

We ❤️ BakeMyWeb

We CREATE & SIMPLIFY Web Designing

We help businesses grow, launch products and gain a competitive advantage in today’s digital-led world. It is one of the most frequently asked questions on the internet. Digitalization means transforming any business into a digital business using digital technologies.

OUR SERVICE

Image

Show details...

Syntax

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

The actual message goes here

{{< /image >}}

Samples

silky
Hi Guys, I'm Silky
cena

Image Grid

Show details...

Syntax

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

The actual message goes here

{{< /image-grid >}}

Samples

Map in full screen

Show details...

Syntax

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

The actual message goes here

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

Samples

Attosol Private Limited

We build and implement solutions that delight High quality consulting services around Identity, Security, Cloud & Solution Development

ASO 401, Astra Towers, Akankha More, Newtown, Rajarhat, Kolkata, West Bengal 700156

+91-33-4804 5018

Map that shows location and address

Show details...

Syntax

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

The actual message goes here

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

Samples

Attosol Private Limited

We build and implement solutions that delight High quality consulting services around Identity, Security, Cloud & Solution Development

ASO 401, Astra Towers, Akankha More, Newtown, Rajarhat, Kolkata, West Bengal 700161

+91-33-4804 5018

Attosol Private Limited

We build and implement solutions that delight High quality consulting services around Identity, Security, Cloud & Solution Development

ASO 401, Astra Towers, Akankha More, Newtown, Rajarhat, Kolkata, West Bengal 700161

+91-33-4804 5018

Number with details

Show details...

Syntax

{{< number-with-details-container
align-horizontal="Use left, center or right to align horizontally"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
is-wrap="true|false"
item-gap="Any value in px,em,rem or %"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

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

The actual message goes here

{{< /number-with-details-item >}}

{{< /number-with-details-container >}}

Samples

People list

Show details...

Syntax

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

The actual message goes here

{{< /people-list >}}

Samples

Meet with Our Team

Person Name

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid temporibus veritatis reprehenderit obcaecati laborum nulla consequatur illo neque dolorem illum fugit facere, esse similique adipisci quae! Sed aliquam libero omnis? Quidem blanditiis temporibus itaque dolores iste facilis illum eius cupiditate. Voluptate similique ex deleniti consectetur nobis sequi molestiae neque sapiente in rerum, aliquid vel quia minus nam odit voluptatum sed. Fugiat ullam quis maxime accusamus nihil adipisci aut, praesentium fuga explicabo, labore veniam. Numquam obcaecati reprehenderit ut distinctio aliquam voluptates optio corrupti perferendis non, ullam aliquid tempore? Nulla, quidem tempore! Qui nulla vero hic? Eos, unde delectus ducimus quo repudiandae nesciunt dolores illo adipisci aperiam deleniti sed aliquid porro iste. Totam ipsam praesentium officia eveniet a molestias magnam voluptatum consectetur.

Person Name

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid temporibus veritatis reprehenderit obcaecati laborum nulla consequatur illo neque dolorem illum fugit facere, esse similique adipisci quae! Sed aliquam libero omnis? Quidem blanditiis temporibus itaque dolores iste facilis illum eius cupiditate. Voluptate similique ex deleniti consectetur nobis sequi molestiae neque sapiente in rerum, aliquid vel quia minus nam odit voluptatum sed. Fugiat ullam quis maxime accusamus nihil adipisci aut, praesentium fuga explicabo, labore veniam. Numquam obcaecati reprehenderit ut distinctio aliquam voluptates optio corrupti perferendis non, ullam aliquid tempore? Nulla, quidem tempore!

Quote 1

Show details...

Syntax

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

The actual message goes here

{{< /quote-1 >}}

Samples

Two things are infinite: the universe and human stupidity; and I’m not sure about the universe

Theoretical physicist

Always forgive your enemies; nothing annoys them so much.

Always forgive your enemies; nothing annoys them so much.

When you have something to say, silence is a lie.

Quote 2

Show details...

Syntax

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

The actual message goes here

{{< /quote-2 >}}

Samples

Two things are infinite: the universe and human stupidity; and I’m not sure about the universe

Always forgive your enemies; nothing annoys them so much.

Theoretical physicist

When you have something to say, silence is a lie

Clinical psychologist

Two things are infinite: the universe and human stupidity; and I’m not sure about the universe

Two things are infinite: the universe and human stupidity; and I’m not sure about the universe

Theoretical physicist

Quote 3

Show details...

Syntax

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

The actual message goes here

{{< /quote-3 >}}

Samples

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis, nesciunt quasi! Quos vel, tempore modi sapiente blanditiis ullam nesciunt dicta culpa consequuntur molestiae eos minus perspiciatis dolor sequi dolorum! Nam. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Designation: Founder
Company: Microsoft

Raw HTML

Show details...

Syntax

{{< rawhtml
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /rawhtml >}}

Samples

This is the HTML div

Reference

Show details...

Syntax

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

The actual message goes here

{{< /reference >}}

Samples

Dynamic Groups membership adds and removes group members automatically using membership rules based on member attributes.

Section Heading 1

Show details...

Syntax

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

The actual message goes here

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

Samples

section heading 3

Show details...

Syntax

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

The actual message goes here

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

Samples

Section Heading 4

Show details...

Syntax

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

The actual message goes here

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

Samples

Section where image expands to width during scroll

Show details...

Syntax

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

The actual message goes here

{{< /section-image-expand-to-width-on-scroll >}}

Samples

Section with both side list items

A section that takes 2 files, and displays content on either side of the image.

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Cakes and Muffins

Vanilla Cream Cup Cakes

When you share a cupcake with other people, it is actually love and joy that you share.

Coconut Cup cakes

The thing about cupcakes is that they’re even sweeter when shared with family and friends.

Choco Frost Cakes

Why cupcakes? Because holding a full-sized cake near your face in public isn’t socially acceptable.

Fruit Cakes

Cupcakes are the tattooed brunette chick of the baked goods world.

Margarita Cup Cakes

When you look at a cupcake, you've got to smile.

Funfatti Cakes

Cupcakes when you want to watch your weight, but still feel the pride that comes with eating an entire cake.

Choco Layer Creams

What makes life so sweet? Cupcakes to eat and someone to love.

Choco Lava Cakes

cupcakes are one of the best desserts in terms of making and eating them.

Section with clean description

Show details...

Syntax

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

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

The actual message goes here

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

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

Samples

Cakes for Dessert

Cupcake

History

The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for "a light cake to bake in small cups" was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in "Seventy-five Receipts for Pastry, Cakes, and Sweetmeats" in 1828 in Eliza Leslie's Receipts cookbook

Recipes

A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips

Variants

A cake in a mug (more commonly known as a mug cake) is a variant that gained popularity on many Internet cooking forums and mailing lists.
A cake in a jar a glass jar is used instead of mugs, trays or liners.
A butterfly cake or fairy cake is a variant of cupcake, also called fairy cake for its fairy-like "wings".

Cupcake kits

Cupcake kits are kits which provide a set of parts needed to allow an amateur baker to produce a themed batch of cupcakes, often to tie in with themed parties. Examples of themes include princess, pirate, fairies and dinosaurs. Typically kits include appropriately decorated cupcake cases and cupcake toppers but some kits are available which also include the ingredients needed for baking.

Update now Muffin

History

The use of the term to describe what are essentially cupcakes or buns did not become common usage in Britain until the last decades of the 20th century on the back of the spread of coffee shops such as Starbucks. Recipes for quickbread muffins are common in 19th-century American cookbooks. Recipes for yeast-based muffins, which were sometimes called "common muffins" or "wheat muffins" in 19th-century American cookbooks, can be found in much older cookbooks

Etymology

One 19th century source suggests that "muffin" may be related to the Greek bread "maphula", a "cake baked on a hearth or griddle", or from Old French "mou-pain" ("soft bread"), which may have been corrupted into "mouffin".

Quickbread muffins

Quickbread muffins (sometimes described in Britain as "American muffins") are baked, individual-sized, cupcake-shaped foods with a "moist, coarse-grained" texture. Muffins are available in both savoury varieties, such as cornmeal and cheese muffins, or sweet varieties such as blueberry, chocolate chip, lemon or banana flavours. Sweetened muffins range from lightly sweetened muffins to products that are "richer than many cakes in fat and sugar.

Bran muffins

Bran muffins use less flour and use bran instead, as well as using molasses and brown sugar. The mix is turned into a pocketed muffin tray, or into individual paper moulds, and baked in an oven. Milk is often added, as it contributes to the appealing browning appearance. The result are raised, individual quickbreads. The muffin may have toppings added, such as cinnamon sugar, streusel, nuts, or chocolate chips.

Section with colorful cards

Section that display colorful cards.

Show details...

Syntax

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

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

The actual message goes here

{{< /section-with-colorful-cards-item >}}

{{< /main-container >}}

Samples

Cup Cakes

Coconut Cupcakes

Cupcakes are sweet, and even sweeter when shared. Coffee makes it possible to get out of bed. Cupcakes make it worthwhile. Keep calm and eat a cupcake!

Cup Cakes

Margarita Cup Cake

A cupcake is a small cake designed to be eaten by one person. They are often baked in a small thin paper or aluminum cup. Like larger cakes, frosting and other cake decorations, such as sprinkles, are common on cupcakes.

Cup Cakes

Apple Pic Cup Cake

The first cupcake could be traced back to 1796. A recipe for a cake to be baked in small cups was written in American Cookery by Amelia Simmons. The earliest use of the term cupcake was in “Seventy-five Receipts for Pastry, Cakes, and Sweetmeats” in 1828 in Eliza Leslie's Recipes cookbook.

Cup Cakes

Choco Chips Cup Cakes

In the early 19th century, there were two different uses for the name cup cake or cupcake. Before muffin tins were widely available, the cakes were often baked in individual pottery cups, ramekins, or molds. They got their name from the cups they were baked in. The name fairy cake is a description of its size.

Section with image and description

If you want to talk about a few topics that has images, it could be helpful to layout the content in an alternating fashion. In one section you can have image in the left with details on the right, and for next section you can reuse this component to put image on the right with details on the left. When viewed on a smaller screen, the content is structured to show image first followed with details.

Show details...

Syntax

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

The actual message goes here

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

Samples

Cactus

Tough but beautiful

A cactus is a member of the plant family Cactaceae, a family comprising about 127 genera with some 1750 known species of the order Caryophyllales. The word cactus derives, through Latin, from the Ancient Greek word κάκτος (káktos), a name originally used by Theophrastus for a spiny plant whose identity is now not certain.

Life is like photography

Always look on the bright side of things

Photography is the art, application, and practice of creating durable images by recording light, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film. It is employed in many fields of science, manufacturing (e.g., photolithography), and business, as well as its more direct uses for art, film and video production, recreational purposes, …

Section with image on left title description

Show details...

Syntax

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

The actual message goes here

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

Samples

Frosted cupcakes

Layers of vanilla sponge cake are filled with sour cherries, white chocolate cream and plenty of Kirschwasser. This cake includes all the essential components of a classic Black Forest Cake; chocolate, sponge cake, real whipped cream, cherries and cherry liquor.

Cream cake

A cream cake is a generic description of many varieties of cream-filled pastries. More specifically cream cake may refer to: The Viennese Cremeschnitte, known in former Yugoslavia as a kremšnita / kremna rezina or krempita, a slice with a puff pastry base and custard cream.

Section with image title description 2

Show details...

Syntax

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

The actual message goes here

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

Samples

Eat Cake, Be Happy

Of course, there are your standard flavors like chocolate, vanilla, and yellow cake, but a true cake connoisseur knows there is are so many more worth exploring.

Bake the Cake

Whether you are captioning your latest cake or cupcake creation, or even a beautiful cake you purchased, these cake quotes will capture whatever sentiment you would like to convey!

Section with image title description 5

Show details...

Syntax

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

The actual message goes here

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

Samples

Artist

Larisa David

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, non id autem sit repudiandae ab numquam dolorum quod ullam omnis eligendi veritatis neque excepturi ducimus perferendis dolore nesciunt alias, fugiat sed voluptatibus. Aspernatur, vero? Quas quo minus fuga laborum aspernatur.

Section with image title description 7

Show details...

Syntax

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

The actual message goes here

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

Samples

Follow Us

BakeMyWeb

Content management, made easy

Section with image, heading and description

Show details...

Syntax

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

The actual message goes here

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

Samples

Sarah Connor

Sarah Connor is a fictional character and the main protagonist of the Terminator franchise. She is one of the protagonists of The Terminator (1984), Terminator 2: Judgment Day (1991), Terminator Genisys (2015), and Terminator: Dark Fate (2019), as well as the television series Terminator: The Sarah Connor Chronicles (2008–2009).

Section with Title, Subtitle and Link

Show details...

Syntax

{{< section-with-title-subtitle-link
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
button-border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
button-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-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"
image-alignment="Any valid image link"
is-flipped="true|false"
is-full-width="true|false"
is-open-in-new="true|false"
linear-gradient="any background or gradient"
link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-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,em,rem 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 >}}

Samples

Section with video title description button

Show details...

Syntax

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

The actual message goes here

{{< /section-with-video-title-description-button >}}

Samples

Recipe for home made Soap

Here is how you can create soap at home.

  • Watch Youtube tutorials
  • Buy stuff
  • Make it!
  • This was quite helpful, right? 😉

Social

Show details...

Syntax

{{< social
align-horizontal="Use left, center or right to align horizontally"
email-link="Any valid http link"
facebook-link="Any valid http link"
instagram-link="Any valid http link"
is-full-width="true|false"
is-open-in-new="true|false"
linkedin-link="Any valid http link"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
pinterest-link="Any valid http link"
twitter-link="Any valid http link"
youtube-link="Any valid http link" >}}

The actual message goes here

{{< /social >}}

Samples

Statistics

Show details...

Syntax

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

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

The actual message goes here

{{< /statistics-item >}}

{{< /main-container >}}

Samples

28

Data Centers

200

M+

Active Users

1

B+

Authentication Daily

99

%

SLA

Statistics with counter

Show details...

Syntax

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

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

The actual message goes here

{{< /statistics-with-counter-item >}}

{{< /main-container >}}

Samples

0

Happy Client

0

cakes

0

Birthday Cakes

0

Stylish Cakes

Sticky Header

Show details...

Syntax

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

The actual message goes here

{{< /stickyheader >}}

Samples

Scroll up to see how it sticks

Summary

Show details...

Syntax

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

The actual message goes here

{{< /summary >}}

Samples

Heading!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem et voluptatem dignissimos in cupiditate repellendus dolorem asperiores, quam blanditiis veritatis facilis incidunt, error harum cum, facere ut optio eveniet. Nostrum?

Heading!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem et voluptatem dignissimos in cupiditate repellendus dolorem asperiores, quam blanditiis veritatis facilis incidunt, error harum cum, facere ut optio eveniet. Nostrum?

Heading!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem et voluptatem dignissimos in cupiditate repellendus dolorem asperiores, quam blanditiis veritatis facilis incidunt, error harum cum, facere ut optio eveniet. Nostrum?

Heading!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem et voluptatem dignissimos in cupiditate repellendus dolorem asperiores, quam blanditiis veritatis facilis incidunt, error harum cum, facere ut optio eveniet. Nostrum?

Tabs

Allows you to create a tabbed interface with different tabs.

Show details...

Syntax

{{< tab-container
active-heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
active-heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
is-heading-border="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

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

The actual message goes here

{{< /tab-item >}}

{{< /tab-container >}}

Samples

Tags

Can be used to display the list of all the tags used in the site.

Show details...

Syntax

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

The actual message goes here

{{< /tags >}}

Samples

  • Active Directory: On premises Identity backbone for the enterprise 
  • Azure Active Directory: Microsoft IDaaS (Identity as a Service) Solution 
  • Azure Information Protection: Classification and Protect your content 
  • Azure Key Vault: Azure Key Vault helps safeguard cryptographic keys and secrets used by cloud applications and services. 
  • Blogging: Helpful tips for Bloggers 
  • CentOS: CentOS is a Linux distribution derived from Red Hat Enterprise Linux (RHEL). It is free, stable, has a small footprint, and is suitable for running your servers in the cloud. 
  • Development: Coding related articles, tips & tricks, and more... 
  • Docker: Package software so that it always run the same, regardless of its environment 
  • Enterprise Mobility Suite: Microsoft EMS comprises of Azure Active Directory, Microsoft Intune & Azure Rights Management Service 
  • Ghost: Ghost blogging platform is fun and easy. It is a good alternative to WordPress for a lot of workloads. 
  • Git: Learn more about Git and how it can help you maintain software development with ease. 
  • Identity Manager: Simplify Identity management for heterogeneous platforms with automated workflows, self-service & business process automation 
  • Intune: Cloud based Enterprise Mobility Management solution 
  • Kubernetes: Learn a bit about Kubernetes 
  • Linux: The Linux philosophy is 'Laugh in the face of danger'. Oops. Wrong One. 'Do it yourself'. Yes, that's it. -Linus Torvalds 
  • MEAN: Articles on MongoDB, Express, Angular & Node 
  • Microsoft Azure: Microsoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more and save money with IaaS + PaaS. 
  • Performance: Learn how you can tweak performance of your servers to get the best ROI. 
  • Productivity: Get the MOST using our productivity hacks. Stay productive! 
  • Security: Trust in God, but lock your doors! 
  • Tips & Tricks: Tips & Tricks related to Infrastructure, Development and more... 
  • WordPress: WordPress is the most popular blogging software. 

Text with action button

Show details...

Syntax

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

The actual message goes here

{{< /text-with-action-button >}}

Samples

Click on the button to download the guide.

To know more please go through the link

Click on the button to download the guide.

The Linux philosophy is 'Laugh in the face of danger'. Oops. Wrong One. 'Do it yourself'. Yes, that's it. -Linus Torvalds Microsoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more and save money with IaaS + PaaS. The Linux philosophy is 'Laugh in the face of danger'. Oops. Wrong One. 'Do it yourself'. Yes, that's it. -Linus Torvalds Microsoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more and save money with IaaS + PaaS.

Click on the button to download the guide.

To know more please go through the link

Toast

Show details...

Syntax

{{< toast
background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
toast-style="primary|success|error|warning" >}}

The actual message goes here

{{< /toast >}}

Samples

Toast - Primary
Toast - Success
Toast - Error
Toast - Warning

Toggle Anything

Toggle anything you enter between the toggle start and the toggle end.

Show details...

Syntax

{{< toggle-start text="Any text">}}

The actual content goes here.

{{< toggle-start >}}

Samples

Show details...

Cake is ❤️ life 

Cake is love ❤️

Eat that slice of cake!
book now

Typing Text Container

Make your website lively with typing text. A static text or headline is good, but having a text that types itself is fancy! It instantly grabs the attention of the user and conveys your message with solidity. Don't overdo it though 😉

Show details...

Syntax

{{< typing-text-container
text="Any text"
text="Any text"
text-color="Any color"
size="Any number in px"
typing-text= "Any text"
typing-text-color= "Any color"
typing-speed="Any number in ms"
typing-pause-before-repeat= "Any time in ms"
is-full-width= "true|false"
margin= "Valid margin"
padding= "Valid padding" >}}

{{< /typing-text >}}

Samples

Typing text