Typography

Display different font size and font family going to be used in the theme

This is typed in H1

This is typed in H2

This is typed in H3

This is typed in H4

This is typed in H5

This is body

Fonts

Add according to usage

Primary Font

Theme Fonts

Font Weights 100

Font Weights 200

Font Weights 300

Font Weights 400

Font Weights 500

Font Weights 600

Font Weights 700

Font Weights 800

Font Weights 900

Secondary Font

Google Fonts

Font Weights 100

Font Weights 200

Font Weights 300

Font Weights 400

Font Weights 500

Font Weights 600

Font Weights 700

Font Weights 800

Font Weights 900

Tertiary Font

Custom Fonts Update the font accordingly

Font Weights 400

Font Weights 400 Italic

Font Weights 700

Font Weights 700 Italic

Buttons

Add button design here

Class to use

.btn--primary

Class to use

.btn--secondary

Class to use

.btn--tertiary

Add button disabled Style

Attibutes can be use

disabled

Class can be use

.btn--secondary.disabled

Aria can be use

aria-disabled='true'

Add button with icons here

Colors

Few colors are already available out of the box check here for more

Orange
.bg-orange-700
for the orange
Lime
.bg-lime-500
for the lime
Cyan
.bg-cyan-500
for the cyan
Fuchsia
.bg-fuchsia-600
for the fuchsia

Custom Colors can be added through the tailwind.config.js below are example

Red
.bg-fantastic-red
for the Custom Red
Green
.bg-fantastic-green
for the Custom Green
Blue
.bg-fantastic-blue
for the Custom Blue
Something
.bg-fantastic-something
for the fantastic something

Accordion

Plant

Plants are predominantly photosynthetic eukaryotes of the kingdom Plantae. Historically, the plant kingdom encompassed all living things that were not animals, and included algae and fungi; however, all current definitions of Plantae exclude the fungi and some algae, as well as the prokaryotes.

Snowflake

A snowflake is a single ice crystal that has achieved a sufficient size, and may have amalgamated with others, which falls through the Earth's atmosphere as snow. Each flake nucleates around a dust particle in supersaturated air masses by attracting supercooled cloud water droplets, which freeze and accrete in crystal form.

Quantity Input

Badges

Default Dark Red Green Yellow Indigo Purple Pink

Variants Pills

Please select product in page.styleguide.liquid

Modal Viewer Popup

Popup/Model

Input Field