Avatars
Basic
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
Features
Circle shape
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
Content
Multiple images
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
<img src="assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO Japan">
</picture>
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
<img src="assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO Japan">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO Golf">
</picture>
<picture class="avatar">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
<img src="assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
<img src="assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
<img src="assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Anita Moore">
</picture>
Text
<div class="avatar avatar-feature-circle avatar-size-small">
<span class="text">12</span>
</div>
Sizes
Nano (20x20px)
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
Small (24x24px)
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
Big (40x40px)
<picture class="avatar avatar-size-big">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
Groups
There's a possibility to place two or more avatars next to each other as a group like so:
<div class="avatar-group">
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Anita Moore">
</picture>
<div class="avatar avatar-feature-circle avatar-size-small">
<span class="text">99</span>
</div>
</div>
Badges
Basic
Faces
Dark
Alert (red)
Themed
Sizes
Big (15px)
Bubbles
Buttons
Tags
Use the button classes on an <a>, <label>, <button>, or <input> element.
Content
Buttons can be used with 4 different types of content:
| Type | Example |
|---|---|
| Text | Text button |
| Icon | |
| Icon + Text | Group |
| Text + Icon | Chart |
| Avatar + Text |
Note: Buttons with glyph icons can be only constructed by using an <a> tag.
Faces
There are three types of button faces:
| Button | Example | Modifier class |
|---|---|---|
| Default | Default | btn-default |
| Primary | Primary | btn-primary |
| Secondary | Secondary | btn-secondary |
| Transparent | Transparent | btn-transparent |
States
These are the possible button states:
| State | Example | Modifier class |
|---|---|---|
| Selected | Selected | selected |
| Disabled | Disabled | disabled |
| Faded | Faded | faded |
Sizes
The default size of buttons is 40px of height. However, there is one more predefined size.
Small (34px of height)
| Size | Example | Modifier class |
|---|---|---|
| Small | Small size | btn-sm |
Features
There are two button features:
| Feature | Example | Modifier class |
|---|---|---|
| Block button | Block button | btn-block |
| Round button | Round button | btn-round |
| Font size 13 | Font size 13 | btn-font-13 |
| Bold text | Bold text | text-bold |
| Uppercase text | Uppercase text | text-uppercase |
Loading
A .btn element can have a loader inside it.
<a class="btn btn-default loading">
<div class="loader loader-color-white loader-size-small loader-mode-stretched">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
Button text
</a>
Builder
Test all possibilities with the button builder down here:
Icons
Glyphs
There are 92 glyphs so far, separated in the following three sizes:
Default
The default size is 18 x 18.
- gl-bell
- gl-caretb
- gl-caretl
- gl-caretr
- gl-carett
- gl-chart-bars
- gl-cross
- gl-dots
- gl-exit
- gl-file-text
- gl-gear
- gl-group
- gl-info
- gl-label
- gl-magnifier
- gl-people
- gl-plus
- gl-questionmark
- gl-reload
- gl-suitcase
- gl-trash
- gl-tick
- gl-text
- gl-play
- gl-photo
- gl-photo-album
- gl-pencil
- gl-pause
- gl-duplicate
- gl-camera
- gl-calendar
- gl-padlock
- gl-thin-arrow-up
- gl-thin-arrow-down
- gl-chain
- gl-video-camera
- gl-facebook
- gl-twitter
- gl-google
- gl-linkedin
- gl-instagram
- gl-youtube
- gl-arrow-down-base
- gl-file-table
- gl-user-plus
- gl-negative
- gl-neutral
- gl-positive
- gl-rotate
- gl-calculator
- gl-file-exclamationmark
- gl-dot-arrows
- gl-dollar
- gl-ads
- gl-boxes-plus
- gl-boxes
- gl-clock
- gl-connected-circles
- gl-exclamationmark
- gl-eye-striked
- gl-eye
- gl-file
- gl-new
- gl-note-plus
- gl-note
- gl-plane
- gl-user-arrow
- gl-zendesk
- gl-18-baloon-text
- gl-18-enter
- gl-18-folder
- gl-18-handshake
- gl-18-move
- gl-18-negative-em
- gl-18-positive-em
- gl-18-puzzle
- gl-18-tower
- gl-18-user-card
- gl-18-user-check
- gl-18-user-mail
- gl-18-allowed
- gl-18-forbidden
- gl-18-code
- gl-18-thin-arrow-right
- gl-18-star
- gl-18-quote
- gl-18-unlocked
- gl-18-locked
- gl-18-area
- gl-18-pin
- gl-18-compare
- gl-18-minus
Small
The small size is 16 x 16.
- gl-16-bell
- gl-16-caretb
- gl-16-caretl
- gl-16-caretr
- gl-16-carett
- gl-16-chart-bars
- gl-16-cross
- gl-16-dots
- gl-16-exit
- gl-16-file-text
- gl-16-gear
- gl-16-group
- gl-16-info
- gl-16-label
- gl-16-magnifier
- gl-16-people
- gl-16-plus
- gl-16-questionmark
- gl-16-reload
- gl-16-suitcase
- gl-16-trash
- gl-16-tick
- gl-16-text
- gl-16-play
- gl-16-photo
- gl-16-photo-album
- gl-16-pencil
- gl-16-pause
- gl-16-duplicate
- gl-16-camera
- gl-16-calendar
- gl-16-padlock
- gl-16-thin-arrow-up
- gl-16-thin-arrow-down
- gl-16-chain
- gl-16-video-camera
- gl-16-facebook
- gl-16-twitter
- gl-16-google
- gl-16-linkedin
- gl-16-instagram
- gl-16-youtube
- gl-16-arrow-down-base
- gl-16-file-table
- gl-16-user-plus
- gl-16-negative
- gl-16-neutral
- gl-16-positive
- gl-16-rotate
- gl-16-calculator
- gl-16-file-exclamationmark
- gl-16-dot-arrows
- gl-16-dollar
- gl-16-ads
- gl-16-boxes-plus
- gl-16-boxes
- gl-16-clock
- gl-16-connected-circles
- gl-16-exclamationmark
- gl-16-eye-striked
- gl-16-eye
- gl-16-file
- gl-16-new
- gl-16-note-plus
- gl-16-note
- gl-16-plane
- gl-16-user-arrow
- gl-16-zendesk
- gl-16-baloon-text
- gl-16-enter
- gl-16-folder
- gl-16-handshake
- gl-16-move
- gl-16-negative-em
- gl-16-positive-em
- gl-16-puzzle
- gl-16-tower
- gl-16-user-card
- gl-16-user-check
- gl-16-user-mail
- gl-16-allowed
- gl-16-forbidden
- gl-16-code
- gl-16-thin-arrow-right
- gl-16-star
- gl-16-quote
- gl-16-unlocked
- gl-16-locked
- gl-16-area
- gl-16-pin
- gl-16-compare
- gl-16-minus
Extra small
The extra small size is 12 x 12.
- gl-12-bell
- gl-12-caretb
- gl-12-caretl
- gl-12-caretr
- gl-12-carett
- gl-12-chart-bars
- gl-12-cross
- gl-12-dots
- gl-12-exit
- gl-12-file-text
- gl-12-gear
- gl-12-group
- gl-12-info
- gl-12-label
- gl-12-magnifier
- gl-12-people
- gl-12-plus
- gl-12-questionmark
- gl-12-reload
- gl-12-suitcase
- gl-12-trash
- gl-12-tick
- gl-12-text
- gl-12-play
- gl-12-photo
- gl-12-photo-album
- gl-12-pencil
- gl-12-pause
- gl-12-duplicate
- gl-12-camera
- gl-12-calendar
- gl-12-padlock
- gl-12-thin-arrow-up
- gl-12-thin-arrow-down
- gl-12-chain
- gl-12-video-camera
- gl-12-facebook
- gl-12-twitter
- gl-12-google
- gl-12-linkedin
- gl-12-instagram
- gl-12-youtube
- gl-12-arrow-down-base
- gl-12-file-table
- gl-12-user-plus
- gl-12-negative
- gl-12-neutral
- gl-12-positive
- gl-12-rotate
- gl-12-calculator
- gl-12-file-exclamationmark
- gl-12-dot-arrows
- gl-12-dollar
- gl-12-ads
- gl-12-boxes-plus
- gl-12-boxes
- gl-12-clock
- gl-12-connected-circles
- gl-12-exclamationmark
- gl-12-eye-striked
- gl-12-eye
- gl-12-file
- gl-12-new
- gl-12-note-plus
- gl-12-note
- gl-12-plane
- gl-12-user-arrow
- gl-12-zendesk
- gl-12-baloon-text
- gl-12-enter
- gl-12-folder
- gl-12-handshake
- gl-12-move
- gl-12-negative-em
- gl-12-positive-em
- gl-12-puzzle
- gl-12-tower
- gl-12-user-card
- gl-12-user-check
- gl-12-user-mail
- gl-12-allowed
- gl-12-forbidden
- gl-12-code
- gl-12-thin-arrow-right
- gl-12-star
- gl-12-quote
- gl-12-unlocked
- gl-12-locked
- gl-12-compare
- gl-12-minus
Social networks
Families
32
16
12
States
Disabled
Reactions
Types
| Icon | Name |
|---|---|
| react-like | |
| react-love | |
| react-haha | |
| react-wow | |
| react-sad | |
| react-angry |
Sizes
Default
The default size is 32 x 32.
Small
The small size is 24 x 24.
Extra small
The extra small size is 16 x 16.
Miscellaneous
| Icon | Name | Size |
|---|---|---|
| misc-check-mark | 14 x 14 | |
| misc-exclamation-mark | 14 x 14 | |
| misc-clock | 14 x 14 | |
| misc-dollar | 16 x 16 | |
| misc-flag | 14 x 14 | |
| misc-hatch | 16 x 16 | |
| misc-questionmark | 12 x 12 | |
| misc-videotape | 64 x 64 | |
| misc-info | 12 x 12 | |
| misc-pending | 14 x 14 | |
| misc-new | 18 x 18 | |
| misc-folder | 32 x 32 | |
| misc-folder-empty | 32 x 32 | |
| misc-check-mark-circle | 12 x 12 | |
| misc-arrow-speedometer | 16 x 75 | |
| misc-letter-e-circle | 14 x 14 | |
| misc-letter-i-circle | 14 x 14 |
System
Basic
A default system icon has a theme color and its dimensions are 195 x 195.
Sizes
Small (140 x 140)
Add sys-size-s class to the .sys container.
Extra small (100 x 100)
Add sys-size-xs class to the .sys container.
Colors
Current
Add sys-col-current class to the .sys container.
Gray
Add sys-col-gray class to the .sys container.
Roles
There are 16 roles so far:
- sys-advertise
- sys-audience
- sys-broken
- sys-empty-box
- sys-failed-publishing
- sys-laptop-cross
- sys-mobile-cross
- sys-no-audience
- sys-no-results
- sys-statistics
- sys-no-statistics
- sys-no-team
- sys-refine-filters
- sys-sent-for-publishing
- sys-success
- sys-task-completed
- sys-team
- sys-waiting-for-preview
Images
Embeded
| Image | Code | Size |
|---|---|---|
<span data-img="komfo-logo"><i></i></span> |
110 x 40 | |
<span data-img="komfo-icon"><i></i></span> |
32 x 32 |
Inputs
Textfields
Basic
With input
Note: The default height of textfield inputs is 40px.
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
With textarea
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"></textarea>
</div>
</div>
Addons
Inside the field, right-floated
On input
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
On textarea
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
Required input
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<span class="asterisk">*</span>
</div>
</div>
</div>
Required textarea
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
<div class="textfield-addon">
<span class="asterisk">*</span>
</div>
</div>
</div>
Inside the field, left-floated
On input
<div class="textfield">
<div class="textfield-area">
<div class="textfield-addon">
<span class="data">999</span>
</div>
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
On textarea
<div class="textfield">
<div class="textfield-area">
<div class="textfield-addon">
<span class="data">999</span>
</div>
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
</div>
</div>
Outside the field, left-floated
With a prefix label and a text input
<div class="textfield">
<div class="textfield-addon">
<label>DKK</label>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
With an icon button and a text input
<div class="textfield">
<div class="textfield-addon">
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
With a dropdown button and a textarea
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
</div>
</div>
With a button group and a text input
<div class="textfield">
<div class="textfield-addon">
<div class="btn-group">
<a class="btn btn-default">Button</a>
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
Outside the field, right-floated
With a suffix label and a text input
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
<div class="textfield-addon">
<label>DKK</label>
</div>
</div>
With an icon button and a text input
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
<div class="textfield-addon">
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
With a dropdown button and a textarea
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
</div>
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
</div>
With a button group and a text input
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
<div class="textfield-addon">
<div class="btn-group">
<a class="btn btn-default">Button</a>
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
Combined
Here are some examples showing various use cases.
<div class="textfield">
<div class="textfield-addon">
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
<div class="textfield-area">
<div class="textfield-addon">
<span class="data">999</span>
</div>
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-primary">Primary button</a>
</div>
</div>
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<div class="textfield-addon">
<span class="data">999</span>
</div>
<textarea class="textfield-input" placeholder="Type your text here"/></textarea>
</div>
<div class="textfield-addon">
<div class="btn-group">
<a class="btn btn-default">Button</a>
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</div>
Multiple textfields in an area
<div class="textfield">
<div class="textfield-addon">
<div class="thumb thumb-size-166">
<div class="holder"></div>
<div class="addon-m">
<a class="btn btn-default"><svg type="gl-18-camera"></svg></a>
</div>
</div>
</div>
<div class="group">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Post title">
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="URL that you want people to visit">
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-default">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
States
Disabled
Use class disabled for disabled state.
<div class="textfield disabled">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" disabled />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-addon">
<label>DKK</label>
</div>
</div>
<div class="textfield disabled">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here" disabled></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-default disabled">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
Error
Use class error for error style.
And this could be an error message. Please, select at least one channel or folder. Max. 150 channels, or folders.
<div class="textfield error">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here"/>
<div class="textfield-addon">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
<div class="nfo">
<p>And this could be an error message. Please, select at least one channel or folder. Max. 150 channels, or folders.</p>
</div>
<div class="textfield error">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
Warning
Use class warning for warning style.
<div class="textfield warning">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
<div class="textfield warning">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
Success
Use class success for success style.
<div class="textfield success">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
<div class="textfield success">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Type your text here"></textarea>
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
Alternative input heights
Small height
<div class="textfield textfield-sm">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
</div>
</div>
<div class="textfield textfield-sm">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-default btn-sm">
<svg type="gl-16-trash"></svg>
</a>
</div>
</div>
Radio buttons
Note: Every input must have an ID and every label next to it must have a "for" attribute with the input's ID.
Structures
Left-aligned
<div class="chk-block">
<div class="chk chk-btn">
<input id="radio-example-1a" type="radio" name="radio-example-1">
<label for="radio-example-1a"><span>First choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-1b" type="radio" name="radio-example-1">
<label for="radio-example-1b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-1c" type="radio" name="radio-example-1">
<label for="radio-example-1c"><span>Thrid choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-1d" type="radio" name="radio-example-1">
<label for="radio-example-1d"><span>Fourth choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-1e" type="radio" name="radio-example-1">
<label for="radio-example-1e"><span>Fifth choice</span></label>
</div>
</div>
Right-aligned
<div class="chk-block">
<div class="chk chk-btn chk-r">
<input id="radio-example-2a" type="radio" name="radio-example-2">
<label for="radio-example-2a"><span>First choice</span></label>
</div>
<div class="chk chk-btn chk-r">
<input id="radio-example-2b" type="radio" name="radio-example-2">
<label for="radio-example-2b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn chk-r">
<input id="radio-example-2c" type="radio" name="radio-example-2">
<label for="radio-example-2c"><span>Thrid choice</span></label>
</div>
<div class="chk chk-btn chk-r">
<input id="radio-example-2d" type="radio" name="radio-example-2">
<label for="radio-example-2d"><span>Fourth choice</span></label>
</div>
<div class="chk chk-btn chk-r">
<input id="radio-example-2e" type="radio" name="radio-example-2">
<label for="radio-example-2e"><span>Fifth choice</span></label>
</div>
</div>
Inline
In order to have inline group of radio buttons, use chk-block-inline class.
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="radio-example-3a" type="radio" name="radio-example-3">
<label for="radio-example-3a"><span>First choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-3b" type="radio" name="radio-example-3">
<label for="radio-example-3b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-3c" type="radio" name="radio-example-3">
<label for="radio-example-3c"><span>Thrid choice</span></label>
</div>
</div>
Columns
Two columns
<div class="mcol">
<div class="mcol-2">
<div class="chk-block">
<div class="chk chk-btn">
<input id="radio-columns-example-1a" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1a"><span>One</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1b" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1b"><span>Two</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1c" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1c"><span>Three</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1d" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1d"><span>Four</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1e" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1e"><span>Five</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1f" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1f"><span>Six</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1g" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1g"><span>Seven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1h" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1h"><span>Eight</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1i" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1i"><span>Nine</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1j" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1j"><span>Ten</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1k" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1k"><span>Eleven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1l" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1l"><span>Twelve</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1m" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1m"><span>Thirteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1n" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1n"><span>Fourteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1o" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1o"><span>Fifteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1p" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1p"><span>Sixteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1q" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1q"><span>Seventeen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1r" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1r"><span>Eighteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1s" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1s"><span>Nineteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-1t" type="radio" name="radio-columns-example-1">
<label for="radio-columns-example-1t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
Three columns
<div class="mcol">
<div class="mcol-3">
<div class="chk-block">
<div class="chk chk-btn">
<input id="radio-columns-example-2a" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2a"><span>One</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2b" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2b"><span>Two</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2c" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2c"><span>Three</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2d" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2d"><span>Four</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2e" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2e"><span>Five</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2f" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2f"><span>Six</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2g" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2g"><span>Seven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2h" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2h"><span>Eight</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2i" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2i"><span>Nine</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2j" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2j"><span>Ten</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2k" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2k"><span>Eleven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2l" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2l"><span>Twelve</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2m" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2m"><span>Thirteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2n" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2n"><span>Fourteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2o" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2o"><span>Fifteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2p" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2p"><span>Sixteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2q" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2q"><span>Seventeen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2r" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2r"><span>Eighteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2s" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2s"><span>Nineteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-2t" type="radio" name="radio-columns-example-2">
<label for="radio-columns-example-2t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
Four columns
<div class="mcol">
<div class="mcol-4">
<div class="chk-block">
<div class="chk chk-btn">
<input id="radio-columns-example-3a" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3a"><span>One</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3b" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3b"><span>Two</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3c" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3c"><span>Three</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3d" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3d"><span>Four</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3e" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3e"><span>Five</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3f" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3f"><span>Six</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3g" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3g"><span>Seven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3h" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3h"><span>Eight</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3i" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3i"><span>Nine</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3j" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3j"><span>Ten</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3k" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3k"><span>Eleven</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3l" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3l"><span>Twelve</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3m" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3m"><span>Thirteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3n" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3n"><span>Fourteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3o" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3o"><span>Fifteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3p" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3p"><span>Sixteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3q" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3q"><span>Seventeen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3r" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3r"><span>Eighteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3s" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3s"><span>Nineteen</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-columns-example-3t" type="radio" name="radio-columns-example-3">
<label for="radio-columns-example-3t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
States
Disabled
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="radio-example-4a" type="radio" name="radio-example-4" disabled="disabled">
<label for="radio-example-4a"><span>Unchecked choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-4b" type="radio" name="radio-example-4" checked="checked" disabled="disabled">
<label for="radio-example-4b"><span>Checked choice</span></label>
</div>
</div>
Error
<div class="chk-block error">
<div class="chk chk-btn">
<input id="radio-example-5a" type="radio" name="radio-example-5">
<label for="radio-example-5a"><span>First choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-5b" type="radio" name="radio-example-5">
<label for="radio-example-5b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-5c" type="radio" name="radio-example-5">
<label for="radio-example-5c"><span>Third choice</span></label>
</div>
</div>
Checkboxes
Note: Every input must have an ID and every label next to it must have a "for" attribute with the input's ID.
Basic
Without label
<div class="chk chk-box">
<input id="checkbox-example-5" type="checkbox">
<label for="checkbox-example-5"></label>
</div>
With label
<div class="chk chk-box">
<input id="checkbox-example-1" type="checkbox">
<label for="checkbox-example-1"><span>I have read Terms & Conditions and confirm that I agree and acept them.</span></label>
</div>
Bundle
<div class="chk chk-box chk-box-bundle">
<input id="checkbox-example-half" type="checkbox" name="checkbox-example-half">
<label for="checkbox-example-half"><span>Bundle input</span></label>
</div>
Double-size
Note: Double-size checkbox only works with no labels around.
<div class="chk chk-box chk-double">
<input id="checkbox-double-example" type="checkbox">
<label for="checkbox-double-example"></label>
</div>
Groups
Left-aligned
<div class="chk-block">
<div class="chk chk-box">
<input id="checkbox-example-2a" type="checkbox" name="checkbox-example-2">
<label for="checkbox-example-2a"><span>First choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-2b" type="checkbox" name="checkbox-example-2">
<label for="checkbox-example-2b"><span>Second choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-2c" type="checkbox" name="checkbox-example-2">
<label for="checkbox-example-2c"><span>Third choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-2d" type="checkbox" name="checkbox-example-2">
<label for="checkbox-example-2d"><span>Fourth choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-2e" type="checkbox" name="checkbox-example-2">
<label for="checkbox-example-2e"><span>Fifth choice</span></label>
</div>
</div>
Right-aligned
<div class="chk-block">
<div class="chk chk-box chk-r">
<input id="checkbox-example-3a" type="checkbox" name="checkbox-example-3">
<label for="checkbox-example-3a"><span>First choice</span></label>
</div>
<div class="chk chk-box chk-r">
<input id="checkbox-example-3b" type="checkbox" name="checkbox-example-3">
<label for="checkbox-example-3b"><span>Second choice</span></label>
</div>
<div class="chk chk-box chk-r">
<input id="checkbox-example-3c" type="checkbox" name="checkbox-example-3">
<label for="checkbox-example-3c"><span>Third choice</span></label>
</div>
<div class="chk chk-box chk-r">
<input id="checkbox-example-3d" type="checkbox" name="checkbox-example-3">
<label for="checkbox-example-3d"><span>Fourth choice</span></label>
</div>
<div class="chk chk-box chk-r">
<input id="checkbox-example-3e" type="checkbox" name="checkbox-example-3">
<label for="checkbox-example-3e"><span>Fifth choice</span></label>
</div>
</div>
Inline
In order to have inline group of checkboxes, use chk-block-inline class.
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="checkbox-example-4a" type="checkbox" name="checkbox-example-4">
<label for="checkbox-example-4a"><span>First choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-4b" type="checkbox" name="checkbox-example-4">
<label for="checkbox-example-4b"><span>Second choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-4c" type="checkbox" name="checkbox-example-4">
<label for="checkbox-example-4c"><span>Third choice</span></label>
</div>
</div>
Columns
Two columns
<div class="mcol">
<div class="mcol-2">
<div class="chk-block">
<div class="chk chk-box">
<input id="checkbox-columns-example-1a" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1a"><span>One</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1b" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1b"><span>Two</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1c" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1c"><span>Three</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1d" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1d"><span>Four</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1e" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1e"><span>Five</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1f" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1f"><span>Six</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1g" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1g"><span>Seven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1h" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1h"><span>Eight</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1i" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1i"><span>Nine</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1j" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1j"><span>Ten</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1k" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1k"><span>Eleven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1l" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1l"><span>Twelve</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1m" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1m"><span>Thirteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1n" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1n"><span>Fourteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1o" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1o"><span>Fifteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1p" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1p"><span>Sixteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1q" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1q"><span>Seventeen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1r" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1r"><span>Eighteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1s" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1s"><span>Nineteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-1t" type="checkbox" name="checkbox-columns-example-1">
<label for="checkbox-columns-example-1t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
Three columns
<div class="mcol">
<div class="mcol-3">
<div class="chk-block">
<div class="chk chk-box">
<input id="checkbox-columns-example-2a" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2a"><span>One</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2b" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2b"><span>Two</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2c" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2c"><span>Three</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2d" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2d"><span>Four</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2e" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2e"><span>Five</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2f" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2f"><span>Six</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2g" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2g"><span>Seven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2h" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2h"><span>Eight</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2i" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2i"><span>Nine</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2j" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2j"><span>Ten</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2k" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2k"><span>Eleven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2l" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2l"><span>Twelve</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2m" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2m"><span>Thirteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2n" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2n"><span>Fourteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2o" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2o"><span>Fifteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2p" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2p"><span>Sixteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2q" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2q"><span>Seventeen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2r" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2r"><span>Eighteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2s" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2s"><span>Nineteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-2t" type="checkbox" name="checkbox-columns-example-2">
<label for="checkbox-columns-example-2t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
Four columns
<div class="mcol">
<div class="mcol-4">
<div class="chk-block">
<div class="chk chk-box">
<input id="checkbox-columns-example-3a" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3a"><span>One</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3b" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3b"><span>Two</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3c" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3c"><span>Three</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3d" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3d"><span>Four</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3e" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3e"><span>Five</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3f" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3f"><span>Six</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3g" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3g"><span>Seven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3h" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3h"><span>Eight</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3i" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3i"><span>Nine</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3j" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3j"><span>Ten</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3k" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3k"><span>Eleven</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3l" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3l"><span>Twelve</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3m" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3m"><span>Thirteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3n" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3n"><span>Fourteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3o" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3o"><span>Fifteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3p" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3p"><span>Sixteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3q" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3q"><span>Seventeen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3r" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3r"><span>Eighteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3s" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3s"><span>Nineteen</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-columns-example-3t" type="checkbox" name="checkbox-columns-example-3">
<label for="checkbox-columns-example-3t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
States
Disabled
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="checkbox-example-6a" type="checkbox" name="checkbox-example-6" disabled="disabled">
<label for="checkbox-example-6a"><span>Unchecked choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-6b" type="checkbox" name="checkbox-example-6" checked="checked" disabled="disabled">
<label for="checkbox-example-6b"><span>Checked choice</span></label>
</div>
</div>
Error
Error on a single item:
<div class="chk chk-box error">
<input id="checkbox-example-7" type="checkbox">
<label for="checkbox-example-7"><span>Error checkbox</span></label>
</div>
Error on a group:
<div class="chk-block error">
<div class="chk chk-box">
<input id="checkbox-example-8a" type="checkbox" name="checkbox-example-8">
<label for="checkbox-example-8a"><span>First choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-8b" type="checkbox" name="checkbox-example-8">
<label for="checkbox-example-8b"><span>Second choice</span></label>
</div>
<div class="chk chk-box">
<input id="checkbox-example-8c" type="checkbox" name="checkbox-example-8">
<label for="checkbox-example-8c"><span>Third choice</span></label>
</div>
</div>
Ranges
<div class="range">
<div>1%</div>
<div class="range-area">
<input type="range">
</div>
<div>100%</div>
</div>
Links
Faces
Icon-link
<a class="link icon-link">
<svg type="gl-16-caretr"></svg> Link with prefix icon
</a>
<a class="link icon-link">
Link with suffix icon <svg type="gl-16-caretr"></svg>
</a>
Loaders
Loaders can differ in size, color and mode.
Sizes
Default (32x26px)
Small (24x20px)
Add loader-size-small class to the loader container.
<div class="loader loader-size-small">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
Dots (6x20px)
Add loader-size-dots class to the loader container.
<div class="loader loader-size-dots">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
Colors
Gray (default)
White
Add class loader-color-white to the loader container.
<!-- This container is just for the example needs -->
<div style="background-color: #ccc; padding: 10px; margin: -10px">
<!-- / -->
<div class="loader loader-color-white">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
Graphite
Add loader-color-graphite class to the loader container.
<div class="loader loader-color-graphite">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
Modes
Stretched
Add loader-mode-stretched class to the loader container and set position: relative to the parent element.
<!-- This container is just for the example needs -->
<div style="position: relative; width: 200px; height: 200px; background-color: #ccc;">
<!-- / -->
<div class="loader loader-color-white loader-mode-stretched">
<span>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
Fullscreen
Add loader-mode-screen class to the loader container.*
Loading bars
<div class="loading-bars">
<div class="loading-bar"></div>
<div class="loading-bar half separated"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar half"></div>
</div>
Pagination bullets
Basic
<div class="pagination-bullets">
<span class="bullet"></span>
<span class="bullet"></span>
<span class="bullet active"></span>
<span class="bullet"></span>
</div>
Progress bars
Sizes
Normal
<span class="progress">
<span class="line" style="width: 66%"></span>
</span>
Small
<span class="progress progress-size-small">
<span class="line" style="width: 33%"></span>
</span>
Ratio bars
Use for showing the proportion of the individual parts of a whole
Types
Sentiments ratio
Set data-type and width (%) attributes for each line.
<span class="ratio-bars">
<span class="line" data-type="positive" style="width: 60%"></span>
<span class="line" data-type="neutral" style="width: 30%"></span>
<span class="line" data-type="negative" style="width: 10%"></span>
</span>
Social boxes
Networks
<div class="social-box" data-network="fb">
<div class="dialog">
<div class="main">
<svg type="gl-18-facebook"></svg>
<span class="counter">158</span>
</div>
</div>
</div>
<div class="social-box" data-network="tw">
<div class="dialog">
<div class="main">
<svg type="gl-18-twitter"></svg>
<span class="counter">1</span>
</div>
</div>
</div>
<div class="social-box" data-network="li">
<div class="dialog">
<div class="main">
<svg type="gl-18-linkedin"></svg>
</div>
</div>
</div>
<div class="social-box" data-network="ig">
<div class="dialog">
<div class="main">
<svg type="gl-18-instagram"></svg>
<span class="counter">1</span>
</div>
</div>
</div>
Google+
<div class="social-box" data-network="gp">
<div class="dialog">
<div class="main">
<svg type="gl-18-google"></svg>
</div>
</div>
</div>
YouTube
<div class="social-box" data-network="yt">
<div class="dialog">
<div class="main">
<svg type="gl-18-youtube"></svg>
<span class="counter">1</span>
</div>
</div>
</div>
Addons
Button
<div class="social-box" data-network="fb">
<div class="dialog">
<div class="main">
<svg type="gl-18-facebook"></svg>
<span class="counter">158</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
Features
Groups
<div class="social-boxes-group">
<div class="social-box" data-network="fb">
<div class="dialog">
<div class="main">
<svg type="gl-18-facebook"></svg>
<span class="counter">158</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="tw">
<div class="dialog">
<div class="main">
<svg type="gl-18-twitter"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="li">
<div class="dialog">
<div class="main">
<svg type="gl-18-linkedin"></svg>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="ig">
<div class="dialog">
<div class="main">
<svg type="gl-18-instagram"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="gp">
<div class="dialog">
<div class="main">
<svg type="gl-18-google"></svg>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
<div class="social-box" data-network="yt">
<div class="dialog">
<div class="main">
<svg type="gl-18-youtube"></svg>
<span class="counter">1</span>
</div>
<div class="addon">
<a class="btn btn-default btn-block">Add channel</a>
</div>
</div>
</div>
</div>
Status dots
Basic
Types
Red
Yellow
<span class="status-dot" type="yellow"><span>In progress</span></span>
Green
Sizes
Small
Switchers
Note: The switchers are based on checkbox inputs.
Basic
Without label
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-4">
<label for="switch-checkbox-example-4">
<span class="switch"><a><i></i></a></span>
</label>
</div>
With label
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-1">
<label for="switch-checkbox-example-1">
<span class="switch"><a><i></i></a></span>
<span class="label">I have read Terms & Conditions and confirm that I agree and acept them.</span>
</label>
</div>
Groups
Left-aligned
<div class="chk-block">
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-2a">
<label for="switch-checkbox-example-2a">
<span class="switch"><a><i></i></a></span>
<span class="label">First switcher</span>
</label>
</div>
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-2b">
<label for="switch-checkbox-example-2b">
<span class="switch"><a><i></i></a></span>
<span class="label">Second switcher</span>
</label>
</div>
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-2c">
<label for="switch-checkbox-example-2c">
<span class="switch"><a><i></i></a></span>
<span class="label">Third switcher</span>
</label>
</div>
</div>
Right-aligned
<div class="chk-block">
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-3a">
<label for="switch-checkbox-example-3a">
<span class="label">First switcher</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-3b">
<label for="switch-checkbox-example-3b">
<span class="label">Second switcher</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-3c">
<label for="switch-checkbox-example-3c">
<span class="label">Third switcher</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
Single-selection
Note: Single-selection switchers must be based on radio buttons.
Left-aligned
<div class="chk-block">
<div class="switcher">
<input type="radio" id="switch-radio-example-1a" name="switch-radio-example-1">
<label for="switch-radio-example-1a">
<span class="switch"><a><i></i></a></span>
<span class="label">Choose this one</span>
</label>
</div>
<div class="switcher">
<input type="radio" id="switch-radio-example-1b" name="switch-radio-example-1">
<label for="switch-radio-example-1b">
<span class="switch"><a><i></i></a></span>
<span class="label">Or this one</span>
</label>
</div>
<div class="switcher">
<input type="radio" id="switch-radio-example-1c" name="switch-radio-example-1">
<label for="switch-radio-example-1c">
<span class="switch"><a><i></i></a></span>
<span class="label">Or this one</span>
</label>
</div>
</div>
Right-aligned
<div class="chk-block">
<div class="switcher">
<input type="radio" id="switch-radio-example-2a" name="switch-radio-example-2">
<label for="switch-radio-example-2a">
<span class="label">Choose this one</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
<div class="switcher">
<input type="radio" id="switch-radio-example-2b" name="switch-radio-example-2">
<label for="switch-radio-example-2b">
<span class="label">Or this one</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
<div class="switcher">
<input type="radio" id="switch-radio-example-2c" name="switch-radio-example-2">
<label for="switch-radio-example-2c">
<span class="label">Or this one</span>
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
States
Disabled
<div class="switcher">
<input type="checkbox" id="switch-checkbox-example-5" disabled="disabled">
<label for="switch-checkbox-example-5">
<span class="switch"><a><i></i></a></span>
</label>
</div>
Tables
Basic
<table> structure:
| Channel | Status | Owners |
|---|---|---|
|
Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans
|
Kalinka Nikiforova |
|
|
Komfo_DK
|
Jonas Als, Kalinka Nikiforova |
|
|
Komfo
|
Mladen Markov |
|
|
ECCO Golf
|
Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey |
|
|
ECCO Golf
|
Jonas Als, Kalinka Nikiforova |
<table class="table-basic">
<thead>
<tr>
<th>Channel</th>
<th>Status</th>
<th>Owners</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Kalinka Nikiforova</p></td>
</tr>
<tr>
<td>
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta">Twitter</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Jonas Als, Kalinka Nikiforova</p></td>
</tr>
<tr>
<td>
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta">linkedIn</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Mladen Markov</p></td>
</tr>
<tr>
<td>
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey</p></td>
</tr>
<tr>
<td>
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Google Plus</span>
</div>
</div>
</div>
</div>
</td>
<td><svg type="gl-16-tick"></svg></td>
<td><p>Jonas Als, Kalinka Nikiforova</p></td>
</tr>
</tbody>
</table>
<div> structure:
Kalinka Nikiforova
Jonas Als, Kalinka Nikiforova
Mladen Markov
Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey
Jonas Als, Kalinka Nikiforova
<div class="table-basic">
<div class="thead">
<div class="tr">
<div class="th">Channel</div>
<div class="th">Status</div>
<div class="th">Owners</div>
</div>
</div>
<div class="tbody">
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td"><svg type="gl-16-tick"></svg></div>
<div class="td"><p>Kalinka Nikiforova</p></div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo_DK</span>
<span class="meta">Twitter</span>
</div>
</div>
</div>
</div>
</div>
<div class="td"><svg type="gl-16-tick"></svg></div>
<div class="td"><p>Jonas Als, Kalinka Nikiforova</p></div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-3.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Komfo</span>
<span class="meta">linkedIn</span>
</div>
</div>
</div>
</div>
</div>
<div class="td"><svg type="gl-16-tick"></svg></div>
<div class="td"><p>Mladen Markov</p></div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="td"><svg type="gl-16-tick"></svg></div>
<div class="td"><p>Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey</p></div>
</div>
<div class="tr">
<div class="td">
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-2.jpg" width="32" height="32" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO Golf</span>
<span class="meta">Google Plus</span>
</div>
</div>
</div>
</div>
</div>
<div class="td"><svg type="gl-16-tick"></svg></div>
<div class="td"><p>Jonas Als, Kalinka Nikiforova</p></div>
</div>
</div>
</div>
Tags
Faces
Dark
Light
<span class="tag tag-face-light">
<span class="main">Light tag</span>
</span>
Addons
Prefix
<span class="tag">
<span class="prefix">$</span>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<span class="prefix">$</span>
<span class="main">Light tag</span>
</span>
Exclamation mark
<span class="tag">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Light tag</span>
</span>
Close button
<span class="tag">
<span class="close"></span>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<span class="close"></span>
<span class="main">Light tag</span>
</span>
Features
Highlight
<span class="tag tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted dark tag</span>
</span>
<span class="tag tag-face-light tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted light tag</span>
</span>
Use cases
Text overflow
<span class="tag">
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<span class="close"></span>
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag">
<span class="close"></span>
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
Texts
Meta
Basic example
Blockquote
Always assume the words you speak are being spoken to you, and then ask yourself, how does this feels.
<blockquote>
<p>Always assume the words you speak are being spoken to you, and then ask yourself, how does this feels.</p>
<span class="meta meta-group text-size-12">
<span>Facebook page</span><span>Komfo DK</span>
</span>
</blockquote>
Thumbnails
Basic
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-l.jpg">
</div>
</div>
Addons
Top
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-tl">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-p.jpg">
</div>
<div class="addon-tr">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
Middle
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-small-l.jpg">
</div>
<div class="addon-ml">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-square.jpg">
</div>
<div class="addon-m">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-small-p.jpg">
</div>
<div class="addon-mr">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
Bottom
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-l.jpg">
</div>
<div class="addon-bl">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
<div class="thumb">
<div class="holder">
<img src="assets/images/samples/link-attachment-p.jpg">
</div>
<div class="addon-br">
<a class="btn btn-default btn-sm">
<svg type="gl-16-camera"></svg>
</a>
</div>
</div>
Features
Sortable
<div class="thumb">
<div class="holder ui-sortable-handle">
<img src="assets/images/samples/link-attachment-l.jpg">
</div>
</div>
Circle
<div class="thumb thumb-ft-circle">
<div class="holder">
<img src="assets/images/samples/avatar-user-1.jpg">
</div>
</div>
Media
<!-- NOTE: 'w150' used for example purposes only -->
<div class="thumb thumb-media w150">
<div class="holder">
<img src="assets/images/samples/avatar-user-1.jpg">
</div>
</div>
States
Uploading
<div class="thumb">
<div class="holder">
<span class="progress">
<span class="line" style="width: 57%"></span>
</span>
</div>
</div>
Loading
<div class="thumb">
<div class="holder">
<div class="loader loader-mode-stretched loader-size-small loader-color-white">
<span><i></i><i></i><i></i></span>
</div>
</div>
</div>
Error
<div class="thumb">
<div class="holder">
<div class="error" title="Use only (jpg, gif, png) files. Use photos less than 16 MB.">
<span>Upload failed</span>
</div>
</div>
</div>
Sizes
120x120px
<div class="thumb thumb-size-120">
<div class="holder">
<img src="assets/images/samples/link-attachment-l.jpg">
</div>
</div>
166x166px
<div class="thumb thumb-size-166">
<div class="holder">
<img src="assets/images/samples/link-attachment-p.jpg">
</div>
</div>