18-ads18-allowed18-area18-arrow-down-base18-baloon-text18-bell18-boxes-plus18-boxes18-calculator18-calendar18-camera18-caretb18-caretl18-caretr18-carett18-chain18-chart-bars18-clock18-code18-compare18-connected-circles18-cross18-dollar18-dot-arrows18-dots18-duplicate18-enter18-exclamationmark18-exit18-eye-striked18-eye18-facebook18-file-exclamationmark18-file-table18-file-text18-file18-folder18-forbidden18-gear18-google18-group18-handshake18-info18-instagram18-label18-linkedin18-locked18-magnifier18-minus18-move18-negative-em18-negative18-neutral18-new18-note-plus18-note18-padlock18-pause18-pencil18-people18-photo-album18-photo18-pin18-plane18-play18-plus18-positive-em18-positive18-puzzle18-questionmark18-quote18-reload18-rotate18-star18-suitcase18-text18-thin-arrow-down18-thin-arrow-right18-thin-arrow-up18-tick18-tower18-trash18-twitter18-unlocked18-user-arrow18-user-card18-user-check18-user-mail18-user-plus18-video-camera18-youtube18-zendesk16-ads16-allowed16-area16-arrow-down-base16-baloon-text16-bell16-boxes-plus16-boxes16-calculator16-calendar16-camera16-caretb16-caretl16-caretr16-carett16-chain16-chart-bars16-clock16-code16-compare16-connected-circles16-cross16-dollar16-dot-arrows16-dots16-duplicate16-enter16-exclamationmark16-exit16-eye-striked16-eye16-facebook16-file-exclamationmark16-file-table16-file-text16-file16-folder16-forbidden16-gear16-google16-group16-handshake16-info16-instagram16-label16-linkedin16-locked16-magnifier16-minus16-move16-negative-em16-negative16-neutral16-new16-note-plus16-note16-padlock16-pause16-pencil16-people16-photo-album16-photo16-pin16-plane16-play16-plus16-positive-em16-positive16-puzzle16-questionmark16-quote16-reload16-rotate16-star16-suitcase16-text16-thin-arrow-down16-thin-arrow-right16-thin-arrow-up16-tick16-tower16-trash16-twitter16-unlocked16-user-arrow16-user-card16-user-check16-user-mail16-user-plus16-video-camera16-youtube16-zendesk12-ads12-allowed12-area12-arrow-down-base12-baloon-text12-bell12-boxes-plus12-boxes12-calculator12-calendar12-camera12-caretb12-caretl12-caretr12-carett12-chain12-chart-bars12-clock12-code12-compare12-connected-circles12-cross12-dollar12-dot-arrows12-dots12-duplicate12-enter12-exclamationmark12-exit12-eye-striked12-eye12-facebook12-file-exclamationmark12-file-table12-file-text12-file12-folder12-forbidden12-gear12-google12-group12-handshake12-info12-instagram12-label12-linkedin12-locked12-magnifier12-minus12-move12-negative-em12-negative12-neutral12-new12-note-plus12-note12-padlock12-pause12-pencil12-people12-photo-album12-photo12-pin12-plane12-play12-plus12-positive-em12-positive12-puzzle12-questionmark12-quote12-reload12-rotate12-star12-suitcase12-text12-thin-arrow-down12-thin-arrow-right12-thin-arrow-up12-tick12-tower12-trash12-twitter12-unlocked12-user-arrow12-user-card12-user-check12-user-mail12-user-plus12-video-camera12-youtube12-zendesk advertiseaudiencebrokenempty-boxfailed-publishinglaptop-crossmobile-crossno-audienceno-resultsno-statisticsno-teamrefine-filterssent-for-publishingstatisticssuccesstask-completedteamwaiting-for-preview arrow-speedometercheck-mark-circlecheck-markclockdollarexclamation-markflagfolder-emptyfolderhatchinfoletter-e-circleletter-i-circlenewpendingquestionmarkvideotape angryhahalikelovesadwow 32-fb32-gp32-ig32-li32-lip32-tw32-yt16-fb16-gp16-ig16-li16-lip16-tw16-yt12-fb12-gp12-ig12-li12-lip12-tw12-yt

Avatars

Basic

ECCO
View source
<picture class="avatar">
    <img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
Copy to clipboard

Features

Circle shape

Kalinka Nikiforova
View source
<picture class="avatar avatar-feature-circle">
    <img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
Copy to clipboard

Content

Multiple images

ECCO ECCO Japan
View source
<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>
Copy to clipboard
ECCO ECCO Japan ECCO Golf
View source
<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>
Copy to clipboard
Kalinka Nikiforova Jordan
View source
<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>
Copy to clipboard
Kalinka Nikiforova Jordan Anita Moore
View source
<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>
Copy to clipboard

Text

12
View source
<div class="avatar avatar-feature-circle avatar-size-small">
    <span class="text">12</span>
</div>
Copy to clipboard

Sizes

Nano (20x20px)

Jordan
View source
<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>
Copy to clipboard

Small (24x24px)

Kalinka Nikiforova
View source
<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>
Copy to clipboard

Big (40x40px)

ECCO
View source
<picture class="avatar avatar-size-big">
    <img src="assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
Copy to clipboard

Groups

There's a possibility to place two or more avatars next to each other as a group like so:

Kalinka Nikiforova Jordan Anita Moore
99
View source
<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>
Copy to clipboard

Badges

Basic

5
View source
<b class="badge"><span>5</span></b>
Copy to clipboard

Faces

Dark

1
View source
<b class="badge badge-face-dark"><span>1</span></b>
Copy to clipboard

Alert (red)

1
View source
<b class="badge badge-face-alert"><span>1</span></b>
Copy to clipboard

Themed

99+
View source
<b class="badge badge-themed"><span>99+</span></b>
Copy to clipboard

Sizes

Big (15px)

17
View source
<b class="badge badge-size-big"><span>17</span></b>
Copy to clipboard

Bubbles

New items

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 ECCOUser

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.

View source
<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>
Copy to clipboard

Builder

Test all possibilities with the button builder down here:

View source
<a class="btn btn-default">Target button</a>
Copy to clipboard

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.

View source
<div class="textfield">
    <div class="textfield-area">
        <input class="textfield-input" type="text" placeholder="Type your text here" />
    </div>
</div>
Copy to clipboard

With textarea

View source
<div class="textfield">
    <div class="textfield-area">
        <textarea class="textfield-input" placeholder="Type your text here"></textarea>
    </div>
</div>
Copy to clipboard

Addons

Inside the field, right-floated

On input

999
View source
<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>
Copy to clipboard

On textarea

999
View source
<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>
Copy to clipboard

Required input

*
View source
<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>
Copy to clipboard

Required textarea

*
View source
<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>
Copy to clipboard

Inside the field, left-floated

On input

999
View source
<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>
Copy to clipboard

On textarea

999
View source
<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>
Copy to clipboard

Outside the field, left-floated

With a prefix label and a text input

View source
<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>
Copy to clipboard

With an icon button and a text input

View source
<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>
Copy to clipboard

With a dropdown button and a textarea

View source
<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>
Copy to clipboard

With a button group and a text input

View source
<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>
Copy to clipboard

Outside the field, right-floated

With a suffix label and a text input

View source
<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>
Copy to clipboard

With an icon button and a text input

View source
<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>
Copy to clipboard

With a dropdown button and a textarea

View source
<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>
Copy to clipboard

With a button group and a text input

View source
<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>
Copy to clipboard

Combined

Here are some examples showing various use cases.

999
View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard
999
View source
<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>
Copy to clipboard

Multiple textfields in an area

999
999
999
View source
<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>
Copy to clipboard

States

Disabled

Use class disabled for disabled state.

999
View source
<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>
Copy to clipboard
999
View source
<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>
Copy to clipboard

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.

View source
<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>
Copy to clipboard
999
View source
<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>
Copy to clipboard

Warning

Use class warning for warning style.

View source
<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>
Copy to clipboard
999
View source
<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>
Copy to clipboard

Success

Use class success for success style.

View source
<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>
Copy to clipboard
999
View source
<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>
Copy to clipboard

Alternative input heights

Small height

View source
<div class="textfield textfield-sm">
    <div class="textfield-area">
        <input class="textfield-input" type="text" placeholder="Type your text here" />
    </div>
</div>
Copy to clipboard
999
View source
<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>
Copy to clipboard

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

View source
<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>
Copy to clipboard

Right-aligned

View source
<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>
Copy to clipboard

Inline

In order to have inline group of radio buttons, use chk-block-inline class.

View source
<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>
Copy to clipboard

Columns

Two columns

View source
<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>
Copy to clipboard

Three columns

View source
<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>
Copy to clipboard

Four columns

View source
<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>
Copy to clipboard

States

Disabled

View source
<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>
Copy to clipboard

Error

View source
<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>
Copy to clipboard

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

View source
<div class="chk chk-box">
    <input id="checkbox-example-5" type="checkbox">
    <label for="checkbox-example-5"></label>
</div>
Copy to clipboard

With label

View source
<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>
Copy to clipboard

Bundle

View source
<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>
Copy to clipboard

Double-size

Note: Double-size checkbox only works with no labels around.

View source
<div class="chk chk-box chk-double">
    <input id="checkbox-double-example" type="checkbox">
    <label for="checkbox-double-example"></label>
</div>
Copy to clipboard

Groups

Left-aligned

View source
<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>
Copy to clipboard

Right-aligned

View source
<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>
Copy to clipboard

Inline

In order to have inline group of checkboxes, use chk-block-inline class.

View source
<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>
Copy to clipboard

Columns

Two columns

View source
<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>
Copy to clipboard

Three columns

View source
<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>
Copy to clipboard

Four columns

View source
<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>
Copy to clipboard

States

Disabled

View source
<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>
Copy to clipboard

Error

Error on a single item:

View source
<div class="chk chk-box error">
    <input id="checkbox-example-7" type="checkbox">
    <label for="checkbox-example-7"><span>Error checkbox</span></label>
</div>
Copy to clipboard

Error on a group:

View source
<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>
Copy to clipboard

Ranges

1%
100%
View source
<div class="range">
    <div>1%</div>
    <div class="range-area">
        <input type="range">
    </div>
    <div>100%</div>
</div>
Copy to clipboard

Links

Faces

View source
<a class="link icon-link">
    <svg type="gl-16-caretr"></svg> Link with prefix icon
</a>
Copy to clipboard
View source
<a class="link icon-link">
    Link with suffix icon <svg type="gl-16-caretr"></svg>
</a>
Copy to clipboard

Loaders

Loaders can differ in size, color and mode.

Sizes

Default (32x26px)

View source
<div class="loader">
    <span>
        <i></i>
        <i></i>
        <i></i>
    </span>
</div>
Copy to clipboard

Small (24x20px)

Add loader-size-small class to the loader container.

View source
<div class="loader loader-size-small">
    <span>
        <i></i>
        <i></i>
        <i></i>
    </span>
</div>
Copy to clipboard

Dots (6x20px)

Add loader-size-dots class to the loader container.

View source
<div class="loader loader-size-dots">
    <span>
        <i></i>
        <i></i>
        <i></i>
    </span>
</div>
Copy to clipboard

Colors

Gray (default)

View source
<div class="loader">
    <span>
        <i></i>
        <i></i>
        <i></i>
    </span>
</div>
Copy to clipboard

White

Add class loader-color-white to the loader container.

View source
<!-- 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>
Copy to clipboard

Graphite

Add loader-color-graphite class to the loader container.

View source
<div class="loader loader-color-graphite">
    <span>
        <i></i>
        <i></i>
        <i></i>
    </span>
</div>
Copy to clipboard

Modes

Stretched

Add loader-mode-stretched class to the loader container and set position: relative to the parent element.

View source
<!-- 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>
Copy to clipboard

Fullscreen

Add loader-mode-screen class to the loader container.*

Loading bars

View source
<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>
Copy to clipboard

Pagination bullets

Basic

View source
<div class="pagination-bullets">
    <span class="bullet"></span>
    <span class="bullet"></span>
    <span class="bullet active"></span>
    <span class="bullet"></span>
</div>
Copy to clipboard

Progress bars

Sizes

Normal

View source
<span class="progress">
    <span class="line" style="width: 66%"></span>
</span>
Copy to clipboard

Small

View source
<span class="progress progress-size-small">
    <span class="line" style="width: 33%"></span>
</span>
Copy to clipboard

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.

View source
<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>
Copy to clipboard

Social boxes

Networks

Facebook

View source
<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>
Copy to clipboard

Twitter

View source
<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>
Copy to clipboard

LinkedIn

View source
<div class="social-box" data-network="li">
    <div class="dialog">
        <div class="main">
            <svg type="gl-18-linkedin"></svg>
        </div>
    </div>
</div>
Copy to clipboard

Instagram

View source
<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>
Copy to clipboard

Google+

View source
<div class="social-box" data-network="gp">
    <div class="dialog">
        <div class="main">
            <svg type="gl-18-google"></svg>
        </div>
    </div>
</div>
Copy to clipboard

YouTube

View source
<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>
Copy to clipboard

Addons

Button

View source
<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>
Copy to clipboard

Features

Groups

View source
<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>
Copy to clipboard

Status dots

Basic

View source
<span class="status-dot"></span>
Copy to clipboard

Types

Red

Disabled
View source
<span class="status-dot" type="red"><span>Disabled</span></span>
Copy to clipboard

Yellow

In progress
View source
<span class="status-dot" type="yellow"><span>In progress</span></span>
Copy to clipboard

Green

Enabled
View source
<span class="status-dot" type="green"><span>Enabled</span></span>
Copy to clipboard

Sizes

Small

View source
<span class="status-dot" size="small"></span>
Copy to clipboard

Switchers

Note: The switchers are based on checkbox inputs.

Basic

Without label

View source
<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>
Copy to clipboard

With label

View source
<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 &amp; Conditions and confirm that I agree and acept them.</span>
    </label>
</div>
Copy to clipboard

Groups

Left-aligned

View source
<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>
Copy to clipboard

Right-aligned

View source
<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>
Copy to clipboard

Single-selection

Note: Single-selection switchers must be based on radio buttons.

Left-aligned

View source
<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>
Copy to clipboard

Right-aligned

View source
<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>
Copy to clipboard

States

Disabled

View source
<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>
Copy to clipboard

Tables

Basic

<table> structure:

Channel Status Owners
ECCO
Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans Facebook

Kalinka Nikiforova

ECCO
Komfo_DK Twitter

Jonas Als, Kalinka Nikiforova

ECCO
Komfo linkedIn

Mladen Markov

ECCO
ECCO Golf Facebook

Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey

ECCO
ECCO Golf Google Plus

Jonas Als, Kalinka Nikiforova

View source
<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>
Copy to clipboard

<div> structure:

Channel
Status
Owners
ECCO
Mighty No. 9 Suffers Another Delay, Inafune "Sincerely Sorry" for Disappointing Fans Facebook

Kalinka Nikiforova

ECCO
Komfo_DK Twitter

Jonas Als, Kalinka Nikiforova

ECCO
Komfo linkedIn

Mladen Markov

ECCO
ECCO Golf Facebook

Kalinka Nikiforova, Martin Metodiev, Mladen Markov, Jonas Als, Gandalf The Grey

ECCO
ECCO Golf Google Plus

Jonas Als, Kalinka Nikiforova

View source
<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>
Copy to clipboard

Tags

Faces

Dark

Dark tag
View source
<span class="tag">
    <span class="main">Dark tag</span>
</span>
Copy to clipboard

Light

Light tag
View source
<span class="tag tag-face-light">
    <span class="main">Light tag</span>
</span>
Copy to clipboard

Addons

Prefix

$ Dark tag $ Light tag
View source
<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>
Copy to clipboard

Exclamation mark

Dark tag Light tag
View source
<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>
Copy to clipboard

Close button

Dark tag Light tag
View source
<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>
Copy to clipboard

Features

Highlight

$ Highlighted dark tag $ Highlighted light tag
View source
<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>
Copy to clipboard

Use cases

Text overflow

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. $ 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. 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. $ 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. 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. 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. $ 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. $ 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.
View source
<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>
Copy to clipboard

Texts

Meta

Basic example

Meta text
View source
<span class="meta">Meta text</span>
Copy to clipboard

Blockquote

Always assume the words you speak are being spoken to you, and then ask yourself, how does this feels.

Facebook pageKomfo DK
View source
<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>
Copy to clipboard

Thumbnails

Basic

View source
<div class="thumb">
    <div class="holder">
        <img src="assets/images/samples/link-attachment-l.jpg">
    </div>
</div>
Copy to clipboard

Addons

Top

View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard

Middle

View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard

Bottom

View source
<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>
Copy to clipboard
View source
<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>
Copy to clipboard

Features

Sortable

View source
<div class="thumb">
    <div class="holder ui-sortable-handle">
        <img src="assets/images/samples/link-attachment-l.jpg">
    </div>
</div>
Copy to clipboard

Circle

View source
<div class="thumb thumb-ft-circle">
    <div class="holder">
        <img src="assets/images/samples/avatar-user-1.jpg">
    </div>
</div>
Copy to clipboard

Media

View source
<!-- 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>
Copy to clipboard

States

Uploading

View source
<div class="thumb">
    <div class="holder">
        <span class="progress">
            <span class="line" style="width: 57%"></span>
        </span>
    </div>
</div>
Copy to clipboard

Loading

View source
<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>
Copy to clipboard

Error

Upload failed
View source
<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>
Copy to clipboard

Sizes

120x120px

View source
<div class="thumb thumb-size-120">
    <div class="holder">
        <img src="assets/images/samples/link-attachment-l.jpg">
    </div>
</div>
Copy to clipboard

166x166px

View source
<div class="thumb thumb-size-166">
    <div class="holder">
        <img src="assets/images/samples/link-attachment-p.jpg">
    </div>
</div>
Copy to clipboard