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
Heading 1 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h2
Heading 2 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h3
Heading 3 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h4
Heading 4 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h5
Heading 5 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h6
Heading 6 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
p
Heading P, Body, ul, li , ol Font Size - Traditional heading elements are designed to work best in the meat of your page content.
small Small Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
caption Caption Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
Medium
h1, .h1, .medium
Heading 1 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h2, .h2, .medium
Heading 2 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h3, .h3, .medium
Heading 3 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h4, .h4, .medium
Heading 4 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h5, .h5, .medium
Heading 5 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h6, .h6, .medium
Heading 6 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
p, .p, .medium
Heading P, Body, ul, li , ol Font Size - Traditional heading elements are designed to work best in the meat of your page content.
small, .small, .medium Small Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
caption, .caption, .medium Caption Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
Semi
h1, .h1, .semi
Heading 1 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h2, .h2, .semi
Heading 2 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h3, .h3, .semi
Heading 3 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h4, .h4, .semi
Heading 4 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h5, .h5, .semi
Heading 5 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
h6, .h6, .semi
Heading 6 Font Size - Traditional heading elements are designed to work best in the meat of your page content.
p, .p, .semi
Heading P, Body, ul, li , ol Font Size - Traditional heading elements are designed to work best in the meat of your page content.
small, .small, .semi Small Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
caption, .caption, .semi Caption Tag Font Size - Traditional heading elements are designed to work best in the meat of your page content.
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 setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoms- (start) for classes that setmargin-leftorpadding-leftin LTR,margin-rightorpadding-rightin RTLe- (end) for classes that setmargin-rightorpadding-rightin LTR,margin-leftorpadding-leftin RTLx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set a
marginorpaddingon 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-8m-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
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10
Column 11
Column 12
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 |
