Display Size and Font Weight
Display Regular
display-1
display-2
display-3
display-4
Display Medium
display-1 medium
display-2 medium
display-3 medium
display-4 medium
Display Semi
display-1 semi
display-2 semi
display-3 semi
display-4 semi
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 setmargin
p
- for classes that setpadding
Where sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
s
- (start) for classes that setmargin-left
orpadding-left
in LTR,margin-right
orpadding-right
in RTLe
- (end) for classes that setmargin-right
orpadding-right
in LTR,margin-left
orpadding-left
in RTLx
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
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 -
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 |