Simplicity —
and lackless

UI Elements

  • Grid
  • Typography
  • Tables
  • Buttons
  • Forms
  • Social Icons
  • Pagination
  • Breadcrumbs
  • Modal

Custom grid

Our mobile-first flexbox grid.

Grid options

   
All
sm
≥480px
md
≥768px
lg
≥1024px
xl
≥1200px
Container max-width: 1800px
# of columns 12
Class prefix .col- .col-sm- .col-lg- .col-lg- .col-xl-
Gutter width 2rem (1rem on left and right)

Grid

.col-lg or .col-lg-1
.col-lg-1_2
.col-lg-1_2
.col-lg-1_3
.col-lg-1_3
.col-lg-1_3
.col-lg-1_3
.col-lg-2_3 or .col-lg
.col-lg-1_4
.col-lg-1_4
.col-lg-1_4
.col-lg-1_4
.col-lg-3_4 or .col-lg
.col-lg-1_4
.col-lg-1_5
.col-lg-1_5
.col-lg-1_5
.col-lg-1_5
.col-lg-1_5
.col-lg-1_6
.col-lg-1_6
.col-lg-1_6
.col-lg-1_6
.col-lg-1_6
.col-lg-1_6
.col-lg-1_2.offset-lg-1_2
.col-lg-2_3.offset-lg-1_3
.col-lg-1_3.offset-lg-2_3
.col-lg-3_4.offset-lg-1_4
.col-lg-2_4.offset-lg-2_4
.col-lg-1_4.offset-lg-3_4

Columns

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
Horizontal alignment
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Welcome to our wonderful world. We sincerely hope that each and every user entering our website will find exactly what he/she is looking for. With advanced features of activating account and new login widgets, you will definitely have a great experience of using our web page.

HTML Text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

This line width Link


Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Specia1ne

Ordered & Unordered Lists

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Perspiciatis deleniti deserunt tempora
  • Lorem ipsum dolor sit amet
  • PathSoft offers a high caliber of resources skilled in Microsoft Azure.NET, mobile and Quality Assurance. They became our true business partners over the past three years.
  • Ethics
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Perspiciatis deleniti deserunt tempora
  3. Lorem ipsum dolor sit amet
  4. PathSoft offers a high caliber of resources skilled in Microsoft Azure.NET, mobile and Quality Assurance. They became our true business partners over the past three years.
  5. Ethics

Default table

Consulting Service Innovation Management Ethics Verified Ethics
Consulting 1.12 4.35 1.43 2.32 5.32 2.11
Customer Service 1.44 1.66 1.43 2.33 5.32 3
Innovation 4.12 1.22 4.55 2.33 5.28 2
Customer Service 1.44 1.66 1.43 2.33 5.32 3
All Items 22 13 14 9 17 11

Secondary table

Consulting Service Innovation Management Ethics Verified Ethics
Consulting 1.12 4.35 1.43 2.32 5.32 2.11
Customer Service 1.44 1.66 1.43 2.33 5.32 3
Innovation 4.12 1.22 4.55 2.33 5.28 2
Customer Service 1.44 1.66 1.43 2.33 5.32 3
All Items 22 13 14 9 17 11

Bordered table

Consulting Service Innovation Management Ethics Verified Ethics
Consulting 1.12 4.35 1.43 2.32 5.32 2.11
Customer Service 1.44 1.66 1.43 2.33 5.32 3
Innovation 4.12 1.22 4.55 2.33 5.28 2
Customer Service 1.44 1.66 1.43 2.33 5.32 3
All Items 22 13 14 9 17 11

Default Buttons

Secondary Buttons

Bordered Buttons

Waves Buttons


Main default buttons


Main waves buttons




Button text circle

Let's do it, my friend.

Input Sizes & Styles

Textarea Sizes & Styles

States

The field is required.
The field is required.

Checkboxes

Radios


Select Sizes & Styles

Social Icons (svg)

Pagination

Breadcrumbs

Modal

Modal open