<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KNHD9PX" height="0" width="0" style="display:none;visibility:hidden">
Kissflow
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

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

















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