Colours

.bgc-alpha-dk
.bgc-alpha
.bgc-alpha-lt

Navigation

skip navigation and go to main content

Links

default link

html

back to top

Lists

Unordered Lists

  • item 1
  • item 2
  • item 3
    • item 1
    • item 2
    • item 3
      • item 1
      • item 2
      • item 3
      • item 4
    • item 4
  • item 4

html

back to top

Ordered Lists

  1. item 1
  2. item 2
  3. item 3
    1. item 1
    2. item 2
    3. item 3
      1. item 1
      2. item 2
      3. item 3
      4. item 4
    4. item 4
  4. item 4

html

back to top

Blockquotes

This is a blockquote! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html

back to top

Horizontal Rules

html

back to top

Headings

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

tempor incididunt ut labore et dolore magna aliqua.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

html

back to top

Text Variations

Text Sizes

.fs-giga

.fs-mega

.fs-kilo

.fs-alpha

.fs-beta

.fs-gamma

.fs-delta

.fs-epsilon

.fs-zeta

.fs-eta

.fs-theta

.fs-milli

.fs-micro

html

back to top

Case

uppercase - .case-u

lowercase - .case-l

capitalise - .case-c

none - .case-n

html

back to top

Fonts

.ff-alpha

.ff-beta

.ff-gamma

html

back to top

Colours

.fc-alpha

.fc-beta

.fc-gamma

.fc-delta

.fc-alpha-ltr

html

back to top

Buttons

Buttons Using anchor tag

.btn .btn - prefix icon .btn - suffix icon .btn .disabled .btn [disabled] .btn .selected .btn .d-block
1 2 3 4 5 6 7
1 2
1

Buttons Using button tag

Buttons Using label tag

Buttons Using submit input tag

html

back to top

Pagination

html

back to top

Labels

Lorem ipsum label sit amet, consectetur adipisicing elit.

Lorem ipsum important sit amet, consectetur adipisicing elit.

Lorem ipsum warning sit amet, consectetur adipisicing elit.

Lorem ipsum success sit amet, consectetur adipisicing elit.

Lorem ipsum info sit amet, consectetur adipisicing elit.

Lorem ipsum inverse sit amet, consectetur adipisicing elit.

html

back to top

Autocomplete

Simple

Custom Data

Custom Data With Tokens

Forms

Inputs and Textarea

.textsuffix.com

html

back to top

Date Picker

Radios and Checkboxes

html

back to top

Gallery

Gallery 2 Columns

caption
caption

caption
caption

Gallery 3 Columns

caption
caption
caption

caption
caption
caption

Gallery 4 Columns

caption
caption
caption
caption

caption
caption
caption
caption

Gallery 5 Columns

caption
caption
caption
caption
caption

caption
caption
caption
caption
caption

html

back to top

WYSIWYG

Alerts

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

html

back to top

File Drop

Add files
Drag 'n drop files here to upload

Tool Tips

Progress Bars

Default

Success

Info

Danger

Warning

html

back to top

Grid

Press 'g' to compare the grid with an overlay.

12→6→3→
12→6→3→
12→6→3→
12→6→3→
12→6→3→
12→6→3→
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1
6→3→4→1

html

back to top