Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Column 7

Column 8

Column 9

Column 10

Column 11

Column 12

Display Size and Font Weight

Display Regular

display-1

Display 1 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-2

Display 2 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-3

Display 3 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-4

Display 4 Font - Traditional heading elements are designed to work best in the meat of your page content.

Display Medium

display-1 medium

Display 1 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-2 medium

Display 2 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-3 medium

Display 3 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-4 medium

Display 4 Font - Traditional heading elements are designed to work best in the meat of your page content.

Display Semi

display-1 semi

Display 1 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-2 semi

Display 2 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-3 semi

Display 3 Font - Traditional heading elements are designed to work best in the meat of your page content.

display-4 semi

Display 4 Font - Traditional heading elements are designed to work best in the meat of your page content.

Font Size and Font Weight

Regular

h1, .h1

Heading 1

h2, .h2

Heading 2

h3,.h3

Heading 3

h4, .h4

Heading 4

h5, .h5

Heading 5

h6, .h6

Heading 6

p, .p

P, Body, ul, li , ol

small, .small
Small Tag

caption, .caption

Caption Tag

Medium

h1, .h1, .medium

Heading 1

h2, .h2, .medium

Heading 2

h3, .h3, .medium

Heading 3

h4, .h4, .medium

Heading 4

h5, .h5, .medium

Heading 5

h6, .h6, .medium

Heading 6

p, .p, .medium

P, Body, ul, li , ol

small, .small, .medium
Small Tag

caption, .caption, .medium

Caption Tag

Semi

h1, .h1, .semi

Heading 1

h2, .h2, .semi

Heading 2

h3, .h3, .semi

Heading 3

h4, .h4, .semi

Heading 4

h5, .h5, .semi

Heading 5

h6, .h6, .semi

Heading 6

p, .p, .semi

P, Body, ul, li , ol

small, .small, .semi
Small Tag

caption, .caption, .semi

Caption Tag

Button Color and Size

Blue Contained

.btn, .btn-blue, .btn-xl

.btn, .btn-blue, .btn-lg

.btn, .btn-blue, .btn-md

.btn, .btn-blue, .btn-sm

Blue Outlined Button

.btn, .btn-outline-blue, .btn-xl

.btn, .btn-outline-blue, .btn-lg

.btn, .btn-outline-blue, .btn-md

.btn, .btn-outline-blue, .btn-sm

Text & Background Color System

Blue or Primary Blue

.text-blue, .bg-blue

Blue

.text-blue100, .bg-blue100

Blue 100

.text-blue200, .bg-blue200

Blue 200

.text-blue300, .bg-blue300

Blue 300

.text-blue400, .bg-blue400

Blue 400

.text-blue600, .bg-blue600

Blue 600

.text-blue700, .bg-blue700

Blue 700

Pink or Primary Pink

.text-pink, .bg-pink

Pink

.text-pink100, .bg-pink100

Pink 100

.text-pink200, .bg-pink200

Pink 200

.text-pink300, .bg-pink300

Pink 300

.text-pink400, .bg-pink400

Pink 400

.text-pink600, .bg-pink600

Pink 600

.text-pink700, .bg-pink700

Pink 700

Earth or Secondary Yellow

.text-earth, .bg-earth

Earth

.text-earth100, .bg-earth100

Earth 100

.text-earth200, .bg-earth200

Earth 200

.text-earth300, .bg-earth300

Earth 300

.text-earth400, .bg-earth400

Earth 400

.text-earth600, .bg-earth600

Earth 600

.text-earth700, .bg-earth700

Earth 700

Air or Secondary Green

.text-air, .bg-air

Air

.text-air100, .bg-air100

Air 100

.text-air200, .bg-air200

Air 200

.text-air300, .bg-air300

Air 300

.text-air400, .bg-air400

Air 400

.text-air600, .bg-air600

Air 600

.text-air700, .bg-air700

Air 700

Charcoal

.text-charcoal, .bg-charcoal

Charcoal

.text-charcoal100, .bg-charcoal100

Charcoal 100

.text-charcoal200, .bg-charcoal200

Charcoal 200

.text-charcoal300, .bg-charcoal300

Charcoal 300

.text-charcoal400, .bg-charcoal400

Charcoal 400

.text-charcoal600, .bg-charcoal600

Charcoal 600

.text-charcoal700, .bg-charcoal700

Charcoal 700

Ash

.text-ash, .bg-ash

Ash

.text-ash100, .bg-ash100

Ash 100

.text-ash200, .bg-ash200

Ash 200

.text-ash300, .bg-ash300

Ash 300

.text-ash400, .bg-ash400

Ash 400

.text-ash600, .bg-ash600

Ash 600

.text-ash700, .bg-ash700

Ash 700

Turquoise

.text-turq, .bg-turq

Turq

.text-turq100, .bg-turq100

Turq 100

.text-turq200, .bg-turq200

Turq 200

.text-turq300, .bg-turq300

Turq 300

.text-turq400, .bg-turq400

Turq 400

.text-turq600, .bg-turq600

Turq 600

.text-turq700, .bg-turq700

Turq 700

Space

.text-space, .bg-space

Space

.text-space100, .bg-space100

Space 100

.text-space200, .bg-space200

Space 200

.text-space300, .bg-space300

Space 300

.text-space400, .bg-space400

Space 400

.text-space600, .bg-space600

Space 600

.text-space700, .bg-space700

Space 700

Margin, Padding Spacing System

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

To know more information about Spacing visit Bootstrap 5 and replace below Kissflow Style Guide Spacing values.

m-8, my-8, mx-8, mt-8, mb-8, ms-8, me-8, p-8, py-8, px-8, pt-8, pb-8, ps-8, pe-8

m-16, my-16, mx-16, mt-16, mb-16, ms-16, me-16, p-16, py-16, px-16, pt-16, pb-16, ps-16, pe-16

m-24, my-24, mx-24, mt-24, mb-24, ms-24, me-24, p-24, py-24, px-24, pt-24, pb-24, ps-24, pe-24

m-32, my-32, mx-32, mt-32, mb-32, ms-32, me-32, p-32, py-32, px-32, pt-32, pb-32, ps-32, pe-32

m-40, my-40, mx-40, mt-40, mb-40, ms-40, me-40, p-40, py-40, px-40, pt-40, pb-40, ps-40, pe-40

m-48, my-48, mx-48, mt-48, mb-48, ms-48, me-48, p-48, py-48, px-48, pt-48, pb-48, ps-48, pe-48

m-56, my-56, mx-56, mt-56, mb-56, ms-56, me-56, p-56, py-56, px-56, pt-56, pb-56, ps-56, pe-56

m-64, my-64, mx-64, mt-64, mb-64, ms-64, me-64, p-64, py-64, px-64, pt-64, pb-64, ps-64, pe-64

m-72, my-72, mx-72, mt-72, mb-72, ms-72, me-72, p-72, py-72, px-72, pt-72, pb-72, ps-72, pe-72

m-80, my-80, mx-80, mt-80, mb-80, ms-80, me-80, p-80, py-80, px-80, pt-80, pb-80, ps-80, pe-80

m-88, my-88, mx-88, mt-88, mb-88, ms-88, me-88, p-88, py-88, px-88, pt-88, pb-88, ps-88, pe-88

m-96, my-96, mx-96, mt-96, mb-96, ms-96, me-96, p-96, py-96, px-96, pt-96, pb-96, ps-96, pe-96

m-104, my-104, mx-104, mt-104, mb-104, ms-104, me-104, p-104, py-104, px-104, pt-104, pb-104, ps-104, pe-104

m-112, my-112, mx-112, mt-112, mb-112, ms-112, me-112, p-112, py-112, px-112, pt-112, pb-112, ps-112, pe-112

Resize the window for various container sizes

Screen size -

Container width is

Padding Margin

Break Tag Calci

Your break tag is --->

Mobile
Hide Show

Ipad
Hide Show

Laptop
Hide Show

Monitor
Hide Show

Breakpoints & Containers

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px	NA ≥1600px	NA ≥1920px
`.container`	100%	100%	730px	940px	1140px	1270px	1430px	1600px

Breakpoints

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px
Extra extra extra large	`xxxl`	≥1600px
Extra extra extra extra large	`xxxxl`	≥1920px

SILO PopUp ID's

SILO	Pop-up ID
Digital Transformation	#wf-get-started-popup
Brand	#all-product-popup
Low-Code	#wf-get-started-popup
No-Code	#wf-get-started-popup
Procurement	#sign-up-form
Project	#header-popup
School	#wf-get-started-popup
Finance	#wf-get-started-popup
Workflowall	#wf-get-started-popup
HR	#wf-get-started-popup
Partners	#partners-join-now-popup
Workflowlite	#wf-get-started-popup
Workflowsuite	#wf-get-started-popup
Application Development	#wf-get-started-popup
Citizen Development	#wf-get-started-popup
Issue Tracking	#all-product-popup