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
Columns
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
Horizontal alignment
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.
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
- 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
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
Social Icons (svg)
Pagination
Breadcrumbs
Modal
Modal Heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum perferendis autem sed. In consectetur deserunt vero mollitia fuga est facere, incidunt quis, ipsa officia odit. Ut repudiandae ad eveniet cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis ratione eos, accusantium corrupti cupiditate voluptatum iure sequi nostrum atque ipsam omnis? Facere tenetur nam quae eligendi quod dolorum illum mollitia.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur facilis esse architecto odio reprehenderit accusamus quas amet veritatis minima aperiam sint ea, veniam dolorum doloremque omnis temporibus molestias quae quisquam!