Logout

Profile

Inbox
Step 4: Typography Interface

Buttons


Box - top / corrected for iOS devices
Recommended
  and  
Standard / colors
Vertical group
Dropdown menu
Action
Group (radio)
Group (checkbox)

Notifications


Click to add notification now.
Click to add notification in 5 sec. (meanwhile: try to open Notification menu).

Slider


JQuery

Built with:

Sliders Component

Modal


Try to remove Calendar event here.
p1
p2
p3
p4
p5
p6

Labels &badges


.topmenu-badge 14 4
.leftmenu-badge144

1 .box-badge 1 .box-badge .badge-red 1 .status-badge

Default Success Warning Important Info Inverse
1 1 1 1 1 1

Tooltip &popover


Sentence with a tooltip and longer explanation.

Ice cream wafer gummi bears. Pastry topping sesame snaps sugar plum sesame snaps danish marzipan dragée sesame snaps. Muffin applicake jelly beans bear claw. Tart cookie toffee marshmallow biscuit. Soufflé fruitcake caramels wypas. Chocolate applicake dessert dragée gummi bears macaroon. Carrot cake pastry chocolate cake cookie pie. Chocolate bar wypas carrot cake. Liquorice jelly-o marzipan biscuit sugar plum marshmallow tart cookie. Sugar plum macaroon sesame snaps powder jujubes. Sentence with a tooltip and longer explanation.

ibox-top

span6
ibox
ibox
span6

ibox-bottom

span6
span6

ibox-middle

span6
span6

ibox-hero

ibox-hero god
ibox-hero

Prograss Bar


Best check yo self, you're not looking too good.
Well done! You successfully read this important alert message.
Oh snap! Change a few things up and try submitting again.
Heads up! This alert needs your attention, but it's not super important.
Title
Alert.
content
Status line.
Title
Alert.
content
Status line.
Alert (version 2).
Title
content
Status line.
Alert (version 2).
Title
content
Status line.

Icons


  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

//Menu

Option1
Option2

//Info

Ice cream wafer gummi bears. Pastry topping sesame snaps sugar plum sesame snaps danish marzipan dragée sesame snaps. Muffin applicake jelly beans bear claw.

Final {Retina} v1.0 ©

Thomas John, 2013
Contact: mail@thomasjohn.eu