Ecco
Breadcrumbs
Types
Section
View source
Copy to clipboard
<div class="breadcrumbs-section">
<span class="crumb">
<a class="link">Channels</a>
</span>
<i class="gl"><svg type="gl-18-caretr"></svg></i>
<span class="crumb">
ECCO Shoes Denmark
</span>
</div>
Path
View source
Copy to clipboard
<div class="breadcrumbs-path">
<span class="crumb">
<a class="link">Channels</a>
</span>
<i class="gl"><svg type="gl-18-caretr"></svg></i>
<span class="crumb">
ECCO Shoes Denmark
</span>
</div>
Button groups
Group a series of buttons together on a single line with the button group.
Basic example
Wrap a series of buttons with .btn in .btn-group.
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-default">Left</a>
<a class="btn btn-default">Middle</a>
<a class="btn btn-default">Right</a>
</div>
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-primary">Left</a>
<a class="btn btn-primary">Middle</a>
<a class="btn btn-primary">Right</a>
</div>
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-secondary">Left</a>
<a class="btn btn-secondary">Middle</a>
<a class="btn btn-secondary">Right</a>
</div>
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-transparent">Left</a>
<a class="btn btn-transparent">Middle</a>
<a class="btn btn-transparent">Right</a>
</div>
Button toolbar
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
View source
Copy to clipboard
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default"><svg type="gl-18-carett"></svg></a>
<a class="btn btn-default"><svg type="gl-18-caretb"></svg></a>
<a class="btn btn-default"><svg type="gl-18-caretl"></svg></a>
<a class="btn btn-default disabled"><svg type="gl-18-caretr"></svg></a>
</div>
<div class="btn-group">
<a class="btn btn-primary "><svg type="gl-18-bell"></svg></a>
<a class="btn btn-primary"><svg type="gl-18-chart-bars"></svg></a>
<a class="btn btn-primary selected"><svg type="gl-18-cross"></svg></a>
</div>
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-file-text"></svg></a>
<a class="btn btn-transparent"><svg type="gl-18-gear"></svg></a>
<a class="btn btn-transparent"><svg type="gl-18-group"></svg></a>
<a class="btn btn-transparent"><svg type="gl-18-info"></svg></a>
</div>
</div>
Nesting
Dropdown
It is possible to place a .dropdown within a .btn-group.
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-default">Simple button</a>
<a class="btn btn-default">Another button</a>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" 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 here</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
<a class="btn btn-default">Last button</a>
</div>
Button group
It is also possible to place a .btn-group within another .btn-group.
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-default">1st level</a>
<a class="btn btn-default">1st level</a>
<div class="btn-group">
<a class="btn btn-primary">2nd level</a>
<a class="btn btn-primary">2nd level</a>
<a class="btn btn-primary">2nd level</a>
</div>
</div>
Features
Separator
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-primary">Left</a>
<hr>
<a class="btn btn-primary">Middle</a>
<hr>
<a class="btn btn-primary">Right</a>
</div>
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-secondary">Left</a>
<hr>
<a class="btn btn-secondary">Middle</a>
<hr>
<a class="btn btn-secondary">Right</a>
</div>
View source
Copy to clipboard
<div class="btn-group">
<a class="btn btn-transparent">Left</a>
<hr>
<a class="btn btn-transparent">Middle</a>
<hr>
<a class="btn btn-transparent">Right</a>
</div>
States tester
A click on a button changes its state.
Calendar graph
Basic
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Week
12AM
3AM
6AM
9AM
12PM
3PM
6PM
9PM
Day
View source
Copy to clipboard
<div class="cal-graph">
<div class="dialog flex">
<div class="col">
<div class="days">
<span class="day">Mon</span>
<span class="day">Tue</span>
<span class="day">Wed</span>
<span class="day">Thu</span>
<span class="day">Fri</span>
<span class="day">Sat</span>
<span class="day">Sun</span>
<span class="day">Week</span>
</div>
</div>
<div class="col flex-g-1">
<div class="flex flex-d-column">
<div class="col">
<div class="hours">
<span>12AM</span>
<span>3AM</span>
<span>6AM</span>
<span>9AM</span>
<span>12PM</span>
<span>3PM</span>
<span>6PM</span>
<span>9PM</span>
<span>Day</span>
</div>
</div>
<div class="col flex-g-1">
<div class="graph">
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="day">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="theme-bgr"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Cards
Basic
View source
Copy to clipboard
<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</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
Features
Circle shape
Add avatar-feature-circle to the avatar container.
Kalinka Nikiforova
View source
Copy to clipboard
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">Admin</span>
</div>
</div>
</div>
</div>
Transparent background
Add avatar-feature-transparent-bgr to the avatar container.
Used when cards are in dropdown selected item.
Kalinka Nikiforova
View source
Copy to clipboard
<div class="card">
<picture class="avatar avatar-feature-transparent-bgr">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">Admin</span>
</div>
</div>
</div>
</div>
Addons
Kalinka Nikiforova
View source
Copy to clipboard
<div class="card">
<picture class="avatar">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">Admin</span>
</div>
</div>
<div class="addon">
<svg type="misc-exclamation-mark"></svg>
</div>
</div>
</div>
Groups
International Students - Campus Sønderborg - University of Southern Denmark
View source
Copy to clipboard
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">International Students - Campus Sønderborg - University of Southern Denmark</span>
<span class="meta">
Small group
</span>
</div>
</div>
</div>
</div>
Worldwide
View source
Copy to clipboard
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Worldwide</span>
<span class="meta">
Shared group
</span>
</div>
</div>
</div>
</div>
2 users
View source
Copy to clipboard
<div class="card">
<picture class="avatar avatar-feature-circle">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">2 users</span>
<span class="meta">
Duo team
</span>
</div>
</div>
</div>
</div>
3 users
View source
Copy to clipboard
<div class="card">
<picture class="avatar avatar-feature-circle">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">3 users</span>
<span class="meta">
Admin team
</span>
</div>
</div>
</div>
</div>
Sizes
Big (40x40px)
Add card-size-big to the card container.
ECCO
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">ECCO</span>
<span class="meta"><i class="social"><svg type="social-12-fb"></svg></i> Facebook</span>
</div>
</div>
</div>
</div>
Local
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
<img src="assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO Japan">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Local</span>
<span class="meta">
Small group
</span>
</div>
</div>
</div>
</div>
Worldwide
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar">
<img src="assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO">
<img src="assets/images/samples/avatar-channel-3.jpg" width="40" height="40" alt="ECCO Japan">
<img src="assets/images/samples/avatar-channel-1.jpg" width="40" height="40" alt="ECCO Golf">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Worldwide</span>
<span class="meta">
Shared group
</span>
</div>
</div>
</div>
</div>
Kalinka Nikiforova
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="40" height="40" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">Admin</span>
</div>
</div>
</div>
</div>
2 users
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="40" height="40" alt="Kalinka Nikiforova">
<img src="assets/images/samples/avatar-user-2.jpg" width="40" height="40" alt="Jordan">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">2 users</span>
<span class="meta">
Duo team
</span>
</div>
</div>
</div>
</div>
3 users
View source
Copy to clipboard
<div class="card card-size-big">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="40" height="40" alt="Kalinka Nikiforova">
<img src="assets/images/samples/avatar-user-2.jpg" width="40" height="40" alt="Jordan">
<img src="assets/images/samples/avatar-user-3.jpg" width="40" height="40" alt="Anita Moore">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">3 users</span>
<span class="meta">
Admin team
</span>
</div>
</div>
</div>
</div>
Dropdowns
Note: There are two engines behind the dropdowns in Komfo UI. Some are driven by Bootstrap while others are based on Select2. When to use which depends on the required needs.
Bootstrap-based
Faces
White
View source
Copy to clipboard
<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 active">
<a href="javascript:;">
<span class="prefix">
<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>
</span>
<span class="text">
Manage
<span class="meta">Organize this item</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-pencil"></svg>
</span>
<span class="text">
Rename
<span class="meta">Give this item a new name</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">
Delete
<span class="meta">Delete this item</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-dots"></svg>
</span>
<span class="text">
More
<span class="meta">Expand more options</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
</ul>
</div>
Graphite
View source
Copy to clipboard
<div class="dropdown">
<button class="btn btn-secondary" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu dropdown-face-graphite">
<li class="dropdown-item active">
<a href="javascript:;">
<span class="prefix">
<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>
</span>
<span class="text">
Manage
<span class="meta">Organize this item</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-pencil"></svg>
</span>
<span class="text">
Rename
<span class="meta">Give this item a new name</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">
Delete
<span class="meta">Delete this item</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-dots"></svg>
</span>
<span class="text">
More
<span class="meta">Expand more options</span>
</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
</ul>
</div>
Addons
Each item can be accompanied by elements placed around its main content.
Prefix
View source
Copy to clipboard
<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="prefix">
<svg class="icon" type="gl-18-group"></svg>
</span>
<span class="text">Manage</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-pencil"></svg>
</span>
<span class="text">Rename</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
<span class="text">Delete</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<svg class="icon" type="gl-18-dots"></svg>
</span>
<span class="text">More</span>
</a>
</li>
</ul>
</div>
Suffix
View source
Copy to clipboard
<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">Manage</span>
<span class="suffix">
<svg class="icon" type="gl-18-group"></svg>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Rename</span>
<span class="suffix">
<svg class="icon" type="gl-18-pencil"></svg>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Delete</span>
<span class="suffix">
<svg class="icon" type="gl-18-trash"></svg>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">More</span>
<span class="suffix">
<svg class="icon" type="gl-18-dots"></svg>
</span>
</a>
</li>
</ul>
</div>
View source
Copy to clipboard
<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">Create team</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Marketeers</span>
<span class="btn-group suffix">
<button class="btn btn-transparent" role="button"><svg type="gl-18-gear"></svg></button>
<button class="btn btn-transparent" role="button"><svg type="gl-18-trash"></svg></button>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Customer support</span>
<span class="btn-group suffix">
<button class="btn btn-transparent" role="button"><svg type="gl-18-gear"></svg></button>
<button class="btn btn-transparent" role="button"><svg type="gl-18-trash"></svg></button>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Content creators</span>
<span class="btn-group suffix">
<button class="btn btn-transparent" role="button"><svg type="gl-18-gear"></svg></button>
<button class="btn btn-transparent" role="button"><svg type="gl-18-trash"></svg></button>
</span>
</a>
</li>
</ul>
</div>
Meta
View source
Copy to clipboard
<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="prefix">
<i class="icon check"><svg type="gl-18-tick"></svg></i>
</span>
<span class="text">
Public
<span class="meta">Visible to everybody</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="prefix">
<i class="icon check"></i>
</span>
<span class="text">
By Location and Language
<span class="meta">Visible to custom audience</span>
</span>
</a>
</li>
</ul>
</div>
States
Disabled
View source
Copy to clipboard
<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">Facebook</span>
</a>
</li>
<li class="dropdown-item disabled">
<a href="javascript:;">
<span class="text">Twitter</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Instagram</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Google+</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">YouTube</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">LinkedIn</span>
</a>
</li>
</ul>
</div>
Features
Top alignment
View source
Copy to clipboard
<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 dropdown-menu-top">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else here</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
</ul>
</div>
Right alignment
View source
Copy to clipboard
<div class="dropdown text-right">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu dropdown-menu-right">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else here</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
<i class="nfo"><svg type="gl-12-exit"></svg></i>
</a>
</li>
</ul>
</div>
Search bar
View source
Copy to clipboard
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<div class="dropdown-box">
<div class="search-bar">
<div class="textfield">
<div class="textfield-area">
<input type="text" class="textfield-input" placeholder="Search" />
<div class="textfield-addon glyph-col-prefix">
<svg ng-show="name" class="gl-magnifier" name="gl-magnifier">
</svg>
</div>
</div>
</div>
</div>
<ul class="dropdown-menu">
<li class="dropdown-item disabled">
<a href="javascript:;">
<span class="text">No results found</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Deep Purple</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Eminem</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Rihanna</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Michael Jackson</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">George Michael</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Red Hot Chili Peppers</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Lady Gaga</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Elton John</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Madonna</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Mariah Carey</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Linkin Park</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Adele</span>
</a>
</li>
</ul>
</div>
</div>
Divider
View source
Copy to clipboard
<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">Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Twitter</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Instagram</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Google+</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">YouTube</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">LinkedIn</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Arrange dashboards</span>
</a>
</li>
</ul>
</div>
Expander
View source
Copy to clipboard
<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">Manage</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Rename</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Delete</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-item dropdown-expander">
<a href="javascript:;">
<span class="text">More</span>
<span class="suffix">
<svg class="icon" type="gl-18-caretb"></svg>
</span>
</a>
</li>
<li data-hidden="true" class="dropdown-item" style="display: none;">
<a href="javascript:;">
<span class="text">Export</span>
</a>
</li>
<li data-hidden="true" class="dropdown-item" style="display: none;">
<a href="javascript:;">
<span class="text">Share</span>
</a>
</li>
<li data-hidden="true" class="dropdown-item" style="display: none;">
<a href="javascript:;">
<span class="text">Open</span>
</a>
</li>
</ul>
</div>
Content
Cards
View source
Copy to clipboard
<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 active">
<a href="javascript:;">
<span class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name">Kalinka Nikiforova</span>
</span>
</span>
</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name">Jordan Ilchev</span>
</span>
</span>
</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name">Nina Metodieva</span>
</span>
</span>
</span>
</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<span class="data">
<span class="cell">
<span class="holder">
<span class="name">Kalinka Nikiforova</span>
</span>
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
Select2-based
Faces
White
Select item
View source
Copy to clipboard
<input id="select2-face-white-example" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-default">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-face-white-example').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<svg type="gl-18-magnifier"></svg>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Graphite
Select item
View source
Copy to clipboard
<input id="select2-face-graphite-example" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-secondary dropdown-face-graphite">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-face-graphite-example').select2({
dropdownCssClass: 'single-dropdown dropdown-face-graphite',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<svg type="gl-18-magnifier"></svg>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Types
Single
Trigger as a default button
Select item
View source
Copy to clipboard
<input id="select2-type-btn-default-example" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-default">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-type-btn-default-example').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<i><svg type="gl-18-magnifier"></svg></i>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Trigger as a secondary button
Select item
View source
Copy to clipboard
<input id="select2-type-btn-secondary-example" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-secondary dropdown-face-graphite">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-type-btn-secondary-example').select2({
dropdownCssClass: 'single-dropdown dropdown-face-graphite',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<i><svg type="gl-18-magnifier"></svg></i>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Trigger as a transparent button
Select item
View source
Copy to clipboard
<input id="select2-type-btn-transparent-example" type="hidden" class="select2-single-dropdown select2-single-btn select2-single-transparent">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-type-btn-transparent-example').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<i><svg type="gl-18-magnifier"></svg></i>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Trigger as a link
Select item
View source
Copy to clipboard
<input id="select2-type-link-example" type="hidden" class="select2-single-dropdown select2-single-link">
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-type-link-example').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select item',
data: response.data
}).on('select2:open', function() {
if ($('.single-dropdown .select2-search .gl').length === 0) {
$('.single-dropdown .select2-search').append('<i class="gl"><svg type="gl-18-magnifier" viewBox="0 0 18 18"><path d="M17.5,15.31l-4.95-4.95a6.52,6.52,0,1,0-2.19,2.19l4.95,4.95ZM3.5,7A3.5,3.5,0,1,1,7,10.5,3.5,3.5,0,0,1,3.5,7Z"/></svg></i>');
}
if ($('.single-dropdown .select2-search__field').length > 0) {
$('.single-dropdown .select2-search__field').attr('placeholder', 'Search');
}
});
$('.select2-selection--single .select2-selection__arrow').html('<svg type="gl-18-caretb"></svg>');
});
Multiple
View source
Copy to clipboard
<select class="select2-multiple-dropdown" multiple="multiple"></select>
function template(data, container) {
return $(
'<span class="main">' + data.text + '</span>' //<svg type="gl-12-cross"></svg>
);
}
$.ajax({
type: 'GET',
dataType: 'json',
url: 'assets/js/select2-example-data.json'
}).done(function(response) {
$('.select2-multiple-dropdown').select2({
placeholder: 'Select items',
data: response.data,
dropdownCssClass: 'multiple-dropdown',
templateSelection: template,
templateResult: function(item) {
if(item.itemType === 'folder') {
return $(
'<div class="card">' +
'<picture class="avatar">' +
item.images.reduce(function (carry, url) {
return carry + '<img src="' + url + '" ' +
'width="32" height="32" alt="' + item.text + '" />';
}, '') +
'</picture>' +
'<div class="data">' +
'<div class="cell">' +
'<div class="holder">' +
'<span class="name">' + item.text + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
} else if(item.itemType === 'channel') {
return $(
'<div class="card">' +
'<picture class="avatar">' +
item.images.reduce(function (carry, url) {
return carry + '<img src="' + url + '" ' +
'width="32" height="32" alt="' + item.text + '" />';
}, '') +
'</picture>' +
'<div class="data">' +
'<div class="cell">' +
'<div class="holder">' +
'<span class="name">' + item.text + '</span>' +
'<span class="meta">Meta details</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
}
},
matcher: function (params, data) {
// Always return the object if there is nothing to compare
if ($.trim(params.term) === '') {
return data;
}
// Do a recursive check for options with children
if (data.children && data.children.length > 0) {
// Clone the data object if there are children
// This is required as we modify the object to remove any non-matches
var match = $.extend(true, {}, data);
// Check each child of the option
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = matcher(params, child);
// If there wasn't a match, remove the object in the array
if (matches === null) {
match.children.splice(c, 1);
}
}
// If any children matched, return the new object
if (match.children.length > 0) {
return match;
}
// If there were no matching children, check just the plain object
return matcher(params, match);
}
var original = data.text.toUpperCase();
var term = params.term.toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}
// If it doesn't contain the term, don't return anything
return null;
},
sorter: function(data) {
return data.sort(function(a,b) {
if (a.text < b.text) { return -1; }
if (a.text > b.text) { return 1; }
return 0;
});
}
}).on('select2:selecting', function (e) {
var element = e.params.args.data.element,
$element = $(element),
$parent = $element.parent();
if ($parent.find(':selected').length > 0) {
var $second = $parent.find(':selected').eq(-1);
$element.detach();
$second.after($element);
} else {
$element.detach();
$parent.prepend($element);
}
});
});
Forms
Use the form classes on any of these three elements: <form>, <div>, <section>.
Note: <fieldset> containers are optional and could be used to wrap different kind of form sections (if there are more than one).
Elements
Textfields
Basic
This example shows use cases with a very long label and an info bullet.
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item1">A text input</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example1-item1" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item2">And the title could become even longer on three ines and may be more <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example1-item2" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example1-item3">A textarea <svg type="misc-questionmark" title="This should be an info text."></svg></label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<textarea id="form-textfield-example1-item3" class="textfield-input" placeholder="A placeholder..."></textarea>
</div>
</div>
</div>
</div>
</form>
Info texts and highlights
This example shows a user cases where some textfields could have additional info text below them, or could have been colored and followed by explanation text for a reason.
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example2-item1">A field with info</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example2-item1" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
<div class="nfo">
<p>You can select up to 150 pages and 200 folders. Or may be not! Who knows ;) The point is that this is a small info text bellow the component.</p>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example2-item2">A warning field</label>
</div>
</div>
<div class="elm warning">
<div class="textfield">
<div class="textfield-area">
<textarea id="form-textfield-example2-item2" class="textfield-input" placeholder="A placeholder..."/></textarea>
<div class="textfield-addon">
<span class="data">140</span>
</div>
</div>
</div>
<div class="nfo">
<p>It's recommended to write text up to 140 characters.</p>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example2-item3">An error field</label>
</div>
</div>
<div class="elm error">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example2-item3" class="textfield-input" type="text" placeholder="A placeholder..." />
<div class="textfield-addon">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
<div class="nfo">
<p>And this could be an error message. Please, select at least one channel or folder. Max. 150 channels, or folders.</p>
</div>
</div>
</div>
</form>
Textfield inputs combined with buttons
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example3-item1">Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example3-item1" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Button</a>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example3-item2">Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example3-item2" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
<div class="textfield-addon">
<div class="btn-group">
<a class="btn btn-default" tabindex="-1">Button</a>
<a class="btn btn-default" tabindex="-1"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example3-item3">Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-textfield-example3-item3" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1"><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>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example3-item4">Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1"><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 id="form-textfield-example3-item4" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
</div>
</div>
</form>
Textfield inputs with custom fixed widths
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example4-item1">Input with default width class</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area default-width">
<input id="form-textfield-example4-item1" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Button</a>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example4-item2">Input with default width class</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Button</a>
</div>
<div class="textfield-area default-width">
<input id="form-textfield-example4-item2" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example4-item3">Inline custom width</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area" style="width: 200px">
<input id="form-textfield-example4-item3" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Button</a>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-textfield-example4-item4">Inline custom width</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Button</a>
</div>
<div class="textfield-area" style="width: 200px">
<input id="form-textfield-example4-item4" class="textfield-input" type="text" placeholder="A placeholder..." />
</div>
</div>
</div>
</div>
</form>
Radio buttons, checkboxes and ranges
Inline structure
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-chk-example-1">Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="chk chk-box">
<input id="form-chk-example-1" type="checkbox" name="checkbox-example-1">
<label for="form-chk-example-1"><span>I have read Terms & Conditions and confirm that I agree and acept them.</span></label>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>And the title could become even longer on three ines and may be more</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="form-chk-example-2a" type="checkbox" name="checkbox-example-2">
<label for="form-chk-example-2a"><span>First choice</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-example-2b" type="checkbox" name="checkbox-example-2">
<label for="form-chk-example-2b"><span>Second choice</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-example-2c" type="checkbox" name="checkbox-example-2">
<label for="form-chk-example-2c"><span>Third choice</span></label>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="range">
<div>1%</div>
<div class="range-area">
<input type="range">
</div>
<div>100%</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Label text goes here</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="form-chk-example-3a" type="checkbox" name="checkbox-example-3">
<label for="form-chk-example-3a"><span>First choice</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-example-3b" type="checkbox" name="checkbox-example-3">
<label for="form-chk-example-3b"><span>Second choice</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-example-3c" type="checkbox" name="checkbox-example-3">
<label for="form-chk-example-3c"><span>Third choice</span></label>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>And the title could become even longer on three ines and may be more</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="form-chk-example-4a" type="radio" name="radio-example-4">
<label for="form-chk-example-4a"><span>First choice</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-example-4b" type="radio" name="radio-example-4">
<label for="form-chk-example-4b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-example-4c" type="radio" name="radio-example-4">
<label for="form-chk-example-4c"><span>Third choice</span></label>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Label text goes here</label>
</div>
</div>
<div class="elm error">
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="form-chk-example-5a" type="radio" name="radio-example-5">
<label for="form-chk-example-5a"><span>First choice</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-example-5b" type="radio" name="radio-example-5">
<label for="form-chk-example-5b"><span>Second choice</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-example-5c" type="radio" name="radio-example-5">
<label for="form-chk-example-5c"><span>Third choice</span></label>
</div>
</div>
<div class="nfo">
<p>Select at least one option to set your preffered timespan.</p>
</div>
</div>
</div>
</form>
Block and column structures
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label>Post type</label>
</div>
</div>
<div class="elm">
<div class="chk-block">
<div class="chk chk-btn">
<input id="form-chk-6a" type="radio" name="form-chk-6">
<label for="form-chk-6a"><span>Status</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-6b" type="radio" name="form-chk-6">
<label for="form-chk-6b"><span>Link</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-6c" type="radio" name="form-chk-6">
<label for="form-chk-6c"><span>Photo</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-6d" type="radio" name="form-chk-6">
<label for="form-chk-6d"><span>Album</span></label>
</div>
<div class="chk chk-btn">
<input id="form-chk-6e" type="radio" name="form-chk-6">
<label for="form-chk-6e"><span>Video</span></label>
</div>
</div>
</div>
</div>
</form>
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label>Label text goes here</label>
</div>
</div>
<div class="elm error">
<div class="mcol">
<div class="mcol-2">
<div class="chk-block">
<div class="chk chk-box">
<input id="form-chk-7a" type="checkbox" name="form-chk-7">
<label for="form-chk-7a"><span>One</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7b" type="checkbox" name="form-chk-7">
<label for="form-chk-7b"><span>Two</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7c" type="checkbox" name="form-chk-7">
<label for="form-chk-7c"><span>Three</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7d" type="checkbox" name="form-chk-7">
<label for="form-chk-7d"><span>Four</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7e" type="checkbox" name="form-chk-7">
<label for="form-chk-7e"><span>Five</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7f" type="checkbox" name="form-chk-7">
<label for="form-chk-7f"><span>Six</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7g" type="checkbox" name="form-chk-7">
<label for="form-chk-7g"><span>Seven</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7h" type="checkbox" name="form-chk-7">
<label for="form-chk-7h"><span>Eight</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7i" type="checkbox" name="form-chk-7">
<label for="form-chk-7i"><span>Nine</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7j" type="checkbox" name="form-chk-7">
<label for="form-chk-7j"><span>Ten</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7k" type="checkbox" name="form-chk-7">
<label for="form-chk-7k"><span>Eleven</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7l" type="checkbox" name="form-chk-7">
<label for="form-chk-7l"><span>Twelve</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7m" type="checkbox" name="form-chk-7">
<label for="form-chk-7m"><span>Thirteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7n" type="checkbox" name="form-chk-7">
<label for="form-chk-7n"><span>Fourteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7o" type="checkbox" name="form-chk-7">
<label for="form-chk-7o"><span>Fifteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7p" type="checkbox" name="form-chk-7">
<label for="form-chk-7p"><span>Sixteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7q" type="checkbox" name="form-chk-7">
<label for="form-chk-7q"><span>Seventeen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7r" type="checkbox" name="form-chk-7">
<label for="form-chk-7r"><span>Eighteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7s" type="checkbox" name="form-chk-7">
<label for="form-chk-7s"><span>Nineteen</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-7t" type="checkbox" name="form-chk-7">
<label for="form-chk-7t"><span>Twenty</span></label>
</div>
</div>
</div>
</div>
<div class="nfo">
<p>You should select at least one post type. The more types selected more people could be reached.</p>
</div>
</div>
</div>
</form>
Identation
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label>Placement</label>
</div>
</div>
<div class="elm">
<div class="inline-cols">
<div class="icol">
<div class="chk chk-box">
<input id="form-chk-8" type="checkbox" name="form-chk-8">
<label for="form-chk-8"><span>Desktop</span></label>
</div>
<div class="chk-block indent">
<div class="chk chk-box">
<input id="form-chk-8a" type="checkbox" name="form-chk-8">
<label for="form-chk-8a"><span>News Feed</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-8b" type="checkbox" name="form-chk-8">
<label for="form-chk-8b"><span>Timeline</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-8c" type="checkbox" name="form-chk-8">
<label for="form-chk-8c"><span>Side bar</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-8d" type="checkbox" name="form-chk-8">
<label for="form-chk-8d"><span>Sponsored</span></label>
</div>
</div>
</div>
<div class="icol">
<div class="chk chk-box">
<input id="form-chk-9" type="checkbox" name="form-chk-9">
<label for="form-chk-9"><span>Mobile</span></label>
</div>
<div class="chk-block indent">
<div class="chk chk-box">
<input id="form-chk-9a" type="checkbox" name="form-chk-9">
<label for="form-chk-9a"><span>News Feed</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-9b" type="checkbox" name="form-chk-9">
<label for="form-chk-9b"><span>Timeline</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-9c" type="checkbox" name="form-chk-9">
<label for="form-chk-9c"><span>Android</span></label>
</div>
<div class="chk chk-box">
<input id="form-chk-9d" type="checkbox" name="form-chk-9">
<label for="form-chk-9d"><span>iOS</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Complex cases
Wrapped lines
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label for="form-complex-example1-item1">Full name</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<input id="form-complex-example1-item1" class="textfield-input" type="text" placeholder="Type your name here..." />
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-complex-example1-item2">About me</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-area">
<textarea id="form-complex-example1-item2" class="textfield-input" placeholder="Type something about you..."></textarea>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label for="form-complex-example1-item3">Contact</label>
</div>
</div>
<div class="elm">
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown" tabindex="-1"><span>Email</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">Email</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Phone</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Twitter</span>
</a>
</li>
</ul>
</div>
</div>
<div class="textfield-area">
<input id="form-complex-example1-item3" class="textfield-input" type="email" placeholder="e. g. kalinka@komfo.com" />
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="line">
<div class="name">
<div class="inner">
<label>Channels</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="form-complex-example1-6a" type="checkbox" name="form-complex-example1-6">
<label for="form-complex-example1-6a"><span>Use from dashboard</span></label>
</div>
<div class="chk chk-box">
<input id="form-complex-example1-6b" type="checkbox" name="form-complex-example1-6">
<label for="form-complex-example1-6b"><span>Select channels</span></label>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Timespan</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-box">
<input id="form-complex-example1-7a" type="checkbox" name="form-complex-example1-7">
<label for="form-complex-example1-7a"><span>Use from dashboard</span></label>
</div>
<div class="chk chk-box">
<input id="form-complex-example1-7b" type="checkbox" name="form-complex-example1-7">
<label for="form-complex-example1-7b"><span>Select channels</span></label>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="line">
<div class="name">
<div class="inner">
<label>Network</label>
</div>
</div>
<div class="elm">
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="form-complex-example1-8a" type="radio" name="radio-example1-8">
<label for="form-complex-example1-8a"><span>Facebook</span></label>
</div>
<div class="chk chk-btn">
<input id="form-complex-example1-8b" type="radio" name="radio-example1-8">
<label for="form-complex-example1-8b"><span>Twitter</span></label>
</div>
</div>
<div class="textfield">
<div class="textfield-area">
<input type="text" id="form-complex-example1-item9" class="textfield-input" placeholder="Select pages or folders" />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
<div class="textfield-addon">
<a class="btn btn-default" tabindex="-1">Add all</a>
</div>
</div>
</div>
</div>
</div>
</form>
Prototypes
Comment form
View source
Copy to clipboard
<form class="comment-form">
<div class="textfield">
<div class="textfield-area">
<textarea class="textfield-input" placeholder="Write a comment ..."></textarea>
</div>
</div>
<div class="thumb">
<div class="holder"></div>
<div class="addon-br">
<input type="file" id="comment-form-upload-input-2">
<label for="comment-form-upload-input-2" class="btn btn-default">
<svg type="gl-16-camera"></svg>
</label>
</div>
</div>
<div class="cf mt10">
<div class="pull-left">
<div class="locked">
<svg type="gl-12-padlock"></svg>
<span>locked by me</span>,
<span class="duration">0:35</span>
</div>
</div>
<div class="pull-right">
<button class="btn btn-primary disabled">Post</button>
</div>
</div>
</form>
Preview
View source
Copy to clipboard
<form class="form form-ll">
<div class="line">
<div class="name">
<div class="inner">
<label>First name</label>
</div>
</div>
<div class="elm preview">
<p>Angelina</p>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Last name</label>
</div>
</div>
<div class="elm preview">
<p>Jolie</p>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Job title</label>
</div>
</div>
<div class="elm preview">
<p>Social Media Specialist</p>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Mobile phone</label>
</div>
</div>
<div class="elm preview">
<p>+359 1234567</p>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Email</label>
</div>
</div>
<div class="elm preview">
<p>Angelina.Jolie@komfo.com</p>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Facebook</label>
</div>
</div>
<div class="elm preview">
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">nikiforova@facebook.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line">
<div class="name">
<div class="inner">
<label>Google+</label>
</div>
</div>
<div class="elm preview">
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">nikiforova@gmail.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Lists
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Note: Use lists with a <ul> structure.
Here are the available list types so far:
Simple
Basic
- Brand Engagement
- Social Media
- Label With Veeery Long Content That Needs To Be Truncated
- Mobile Installs
- Social Media
- Lead Generations
- Brand Engagement
- Social Media
- Complains
- Happy Fans
- 138 more ...
View source
Copy to clipboard
<ul class="list-simple">
<li>
<span class="txt">Brand Engagement</span>
</li>
<li>
<span class="txt">Social Media</span>
</li>
<li>
<span class="txt">Label With Veeery Long Content That Needs To Be Truncated</span>
</li>
<li>
<span class="txt">Mobile Installs</span>
</li>
<li>
<span class="txt">Social Media</span>
</li>
<li>
<span class="txt">Lead Generations</span>
</li>
<li>
<span class="txt">Brand Engagement</span>
</li>
<li>
<span class="txt">Social Media</span>
</li>
<li>
<span class="txt">Complains</span>
</li>
<li>
<span class="txt">Happy Fans</span>
</li>
<li>
<span class="txt">138 more ...</span>
</li>
</ul>
Stats
- Post type 0
- Dark posts 12
- Ads boost 345
- Something veeeeeeery long content that need to be truncated 999,9M
- Labels 876
- Channels 54
View source
Copy to clipboard
<ul class="list-simple">
<li class="stats">
<span class="cell"><span class="stat">Post type</span></span>
<span class="cell"><span class="val">0</span></span>
</li>
<li class="stats">
<span class="cell"><span class="stat">Dark posts</span></span>
<span class="cell"><span class="val">12</span></span>
</li>
<li class="stats">
<span class="cell"><span class="stat">Ads boost</span></span>
<span class="cell"><span class="val">345</span></span>
</li>
<li class="stats">
<span class="cell"><span class="stat">Something veeeeeeery long content that need to be truncated</span></span>
<span class="cell"><span class="val">999,9M</span></span>
</li>
<li class="stats">
<span class="cell"><span class="stat">Labels</span></span>
<span class="cell"><span class="val">876</span></span>
</li>
<li class="stats">
<span class="cell"><span class="stat">Channels</span></span>
<span class="cell"><span class="val">54</span></span>
</li>
</ul>
Definitions
- Post type Status • Link • Photo • Photo album • Video
- Dark posts Show only dark posts with no reach
- Performance Viral • Engaging • Penetration • Spammy
- Ads boost Show only dark ads boosted posts
- Labels Brand Engagement • Social Media • Website Conversions • Mobile Installs • Complains • 35 more
View source
Copy to clipboard
<ul class="list-simple">
<li class="def">
<span class="cell">
<span class="name">Post type</span>
</span>
<span class="cell">
<span class="val">
<span class="item">Status • Link • Photo • Photo album • Video</span>
</span>
</span>
</li>
<li class="def">
<span class="cell">
<span class="name">Dark posts</span>
</span>
<span class="cell">
<span class="val">
<span class="item">Show only dark posts with no reach</span>
</span>
</span>
</li>
<li class="def">
<span class="cell">
<span class="name">Performance</span>
</span>
<span class="cell">
<span class="val">
<span class="item">Viral • Engaging • Penetration • Spammy</span>
</span>
</span>
</li>
<li class="def">
<span class="cell">
<span class="name">Ads boost</span>
</span>
<span class="cell">
<span class="val">
<span class="item">Show only dark ads boosted posts</span>
</span>
</span>
</li>
<li class="def">
<span class="cell">
<span class="name">Labels</span>
</span>
<span class="cell">
<span class="val">
<span class="item">Brand Engagement • Social Media • Website Conversions • Mobile Installs • Complains • 35 more</span>
</span>
</span>
</li>
</ul>
Combined list
- Faceook Comments 1
- Replies 23
- Private Messages 456
- Something very long that needs to be truncated Mobille engagement and moooore 999,9M
- Google+ Comments 9
- Twitter Retweets 87
- YouTube Comments 654
- Linkedin groups Comments 32
- Linkedin Pages Comments 1
View source
Copy to clipboard
<ul class="list-simple">
<li class="def stats">
<span class="cell">
<span class="name">Faceook</span>
</span>
<span class="cell">
<span class="stat">Comments</span>
</span>
<span class="cell">
<span class="val">1</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name"></span>
</span>
<span class="cell">
<span class="stat">Replies</span>
</span>
<span class="cell">
<span class="val">23</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name"></span>
</span>
<span class="cell">
<span class="stat">Private Messages</span>
</span>
<span class="cell">
<span class="val">456</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">Something very long that needs to be truncated</span>
</span>
<span class="cell">
<span class="stat">Mobille engagement and moooore</span>
</span>
<span class="cell">
<span class="val">999,9M</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">Google+</span>
</span>
<span class="cell">
<span class="stat">Comments</span>
</span>
<span class="cell">
<span class="val">9</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">Twitter</span>
</span>
<span class="cell">
<span class="stat">Retweets</span>
</span>
<span class="cell">
<span class="val">87</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">YouTube</span>
</span>
<span class="cell">
<span class="stat">Comments</span>
</span>
<span class="cell">
<span class="val">654</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">Linkedin groups</span>
</span>
<span class="cell">
<span class="stat">Comments</span>
</span>
<span class="cell">
<span class="val">32</span>
</span>
</li>
<li class="def stats">
<span class="cell">
<span class="name">Linkedin Pages</span>
</span>
<span class="cell">
<span class="stat">Comments</span>
</span>
<span class="cell">
<span class="val">1</span>
</span>
</li>
</ul>
Sheetrows
Basic
-
First row
-
Second row
-
Third row
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
First row
</div>
</li>
<li class="list-item">
<div class="main">
Second row
</div>
</li>
<li class="list-item">
<div class="main">
Third row
</div>
</li>
</ul>
Addons
Checkbox
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-left-1" type="checkbox">
<label for="sheetrow-list-checkbox-left-1"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-checkbox-left-1">All labels</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-left-2" type="checkbox">
<label for="sheetrow-list-checkbox-left-2"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-checkbox-left-2">Branding DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-left-3" type="checkbox">
<label for="sheetrow-list-checkbox-left-3"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-checkbox-left-3">Engagement DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-left-4" type="checkbox">
<label for="sheetrow-list-checkbox-left-4"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-checkbox-left-4">Website DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-left-5" type="checkbox">
<label for="sheetrow-list-checkbox-left-5"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-checkbox-left-5">Website BG</label>
</div>
</li>
</ul>
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-1">All labels</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-1" type="checkbox">
<label for="sheetrow-list-checkbox-right-1"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-2">Branding DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-2" type="checkbox">
<label for="sheetrow-list-checkbox-right-2"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-3">Engagement DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-3" type="checkbox">
<label for="sheetrow-list-checkbox-right-3"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-4">Website DK</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-4" type="checkbox">
<label for="sheetrow-list-checkbox-right-4"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-checkbox-right-5">Website BG</label>
</div>
<div class="addon">
<div class="chk chk-box">
<input id="sheetrow-list-checkbox-right-5" type="checkbox">
<label for="sheetrow-list-checkbox-right-5"></label>
</div>
</div>
</li>
</ul>
Radio button
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-left-1" name="sheetrow-list-radio-left" type="radio">
<label for="sheetrow-list-radio-left-1"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-radio-left-1">All labels</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-left-2" name="sheetrow-list-radio-left" type="radio">
<label for="sheetrow-list-radio-left-2"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-radio-left-2">Branding DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-left-3" name="sheetrow-list-radio-left" type="radio">
<label for="sheetrow-list-radio-left-3"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-radio-left-3">Engagement DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-left-4" name="sheetrow-list-radio-left" type="radio">
<label for="sheetrow-list-radio-left-4"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-radio-left-4">Website DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-left-5" name="sheetrow-list-radio-left" type="radio">
<label for="sheetrow-list-radio-left-5"></label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-radio-left-5">Website BG</label>
</div>
</li>
</ul>
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
<label for="sheetrow-list-radio-right-1">All labels</label>
</div>
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-right-1" name="sheetrow-list-radio-right" type="radio">
<label for="sheetrow-list-radio-right-1"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-radio-right-2">Branding DK</label>
</div>
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-right-2" name="sheetrow-list-radio-right" type="radio">
<label for="sheetrow-list-radio-right-2"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-radio-right-3">Engagement DK</label>
</div>
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-right-3" name="sheetrow-list-radio-right" type="radio">
<label for="sheetrow-list-radio-right-3"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-radio-right-4">Website DK</label>
</div>
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-right-4" name="sheetrow-list-radio-right" type="radio">
<label for="sheetrow-list-radio-right-4"></label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-radio-right-5">Website BG</label>
</div>
<div class="addon">
<div class="chk chk-btn">
<input id="sheetrow-list-radio-right-5" name="sheetrow-list-radio-right" type="radio">
<label for="sheetrow-list-radio-right-5"></label>
</div>
</div>
</li>
</ul>
Switcher
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-left-1">
<label for="sheetrow-list-switcher-left-1">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-switcher-left-1">All labels</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-left-2">
<label for="sheetrow-list-switcher-left-2">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-switcher-left-2">Branding DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-left-3">
<label for="sheetrow-list-switcher-left-3">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-switcher-left-3">Engagement DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-left-4">
<label for="sheetrow-list-switcher-left-4">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-switcher-left-4">Website DK</label>
</div>
</li>
<li class="list-item">
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-left-5">
<label for="sheetrow-list-switcher-left-5">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
<div class="main">
<label for="sheetrow-list-switcher-left-5">Website BG</label>
</div>
</li>
</ul>
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
<label for="sheetrow-list-switcher-right-1">All labels</label>
</div>
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-right-1">
<label for="sheetrow-list-switcher-right-1">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-switcher-right-2">Branding DK</label>
</div>
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-right-2">
<label for="sheetrow-list-switcher-right-2">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-switcher-right-3">Engagement DK</label>
</div>
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-right-3">
<label for="sheetrow-list-switcher-right-3">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-switcher-right-4">Website DK</label>
</div>
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-right-4">
<label for="sheetrow-list-switcher-right-4">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</li>
<li class="list-item">
<div class="main">
<label for="sheetrow-list-switcher-right-5">Website BG</label>
</div>
<div class="addon">
<div class="switcher">
<input type="checkbox" id="sheetrow-list-switcher-right-5">
<label for="sheetrow-list-switcher-right-5">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</li>
</ul>
Meta text
-
All labels
-
Branding DK
-
Engagement DK
-
Website DK
-
Website BG
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
All labels
</div>
<div class="addon">
<span class="meta">excluded</span>
</div>
</li>
<li class="list-item">
<div class="main">
Branding DK
</div>
<div class="addon">
<span class="meta">257</span>
</div>
</li>
<li class="list-item">
<div class="main">
Engagement DK
</div>
<div class="addon">
<span class="meta">134</span>
</div>
</li>
<li class="list-item">
<div class="main">
Website DK
</div>
<div class="addon">
<span class="meta">included</span>
</div>
</li>
<li class="list-item">
<div class="main">
Website BG
</div>
<div class="addon">
<span class="meta">deleted</span>
</div>
</li>
</ul>
Icon
-
All labels
-
Branding DK
-
Engagement DK
-
Website DK
-
Website BG
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
<div class="main">
All labels
</div>
</li>
<li class="list-item">
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
<div class="main">
Branding DK
</div>
</li>
<li class="list-item">
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
<div class="main">
Engagement DK
</div>
</li>
<li class="list-item">
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
<div class="main">
Website DK
</div>
</li>
<li class="list-item">
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
<div class="main">
Website BG
</div>
</li>
</ul>
-
All labels
-
Branding DK
-
Engagement DK
-
Website DK
-
Website BG
View source
Copy to clipboard
<ul class="list-sheetrows">
<li class="list-item">
<div class="main">
All labels
</div>
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
</li>
<li class="list-item">
<div class="main">
Branding DK
</div>
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
</li>
<li class="list-item">
<div class="main">
Engagement DK
</div>
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
</li>
<li class="list-item">
<div class="main">
Website DK
</div>
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
</li>
<li class="list-item">
<div class="main">
Website BG
</div>
<div class="addon">
<svg type="gl-18-info"></svg>
</div>
</li>
</ul>
Cards
-
International Students - Campus Sønderborg - University of Southern Denmark
-
Worldwide
-
2 users
View source
Copy to clipboard
<ul class="list-cards">
<li class="list-item">
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">International Students - Campus Sønderborg - University of Southern Denmark</span>
<span class="meta">tight group</span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Worldwide</span>
<span class="meta">Shared group</span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div class="card">
<picture class="avatar avatar-feature-circle">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">2 users</span>
<span class="meta">Duo team</span>
</div>
</div>
</div>
</div>
</li>
</ul>
Blocks
Styles
Background color
By default the background color of each item is gray.
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
However, if there's a need the background color to be white, the list container has to be populated with list-blocks-white class like so:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<!-- This container is just for the example needs -->
<div style="background-color: #ebebea; padding: 10px; margin: -10px">
<!-- / -->
<ul class="list-blocks list-blocks-white">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Gap
By default there's a transparent gap of 1px between all list group items.
-
Branding fans Global
-
Webclicks DK social media interesser
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 days left</span></span>
</div>
</div>
</div>
</div>
</li>
</ul>
-
Branding fans Global
-
Webclicks DK social media interesser
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<!-- This container is just for the example needs -->
<div style="background-color: #ebebea; padding: 10px; margin: -10px">
<!-- / -->
<ul class="list-blocks list-blocks-white">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 days left</span></span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
However, if there is no need of gaps, the list container has to be populated with list-blocks-nogap class like so:
-
Branding fans Global
-
Webclicks DK social media interesser
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks list-blocks-nogap">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 days left</span></span>
</div>
</div>
</div>
</div>
</li>
</ul>
-
Branding fans Global
-
Webclicks DK social media interesser
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<!-- This container is just for the example needs -->
<div style="background-color: #ebebea; padding: 10px; margin: -10px">
<!-- / -->
<ul class="list-blocks list-blocks-white list-blocks-nogap">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 days left</span></span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Content
Text
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 days left</span></span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Cards
-
International Students - Campus Sønderborg - University of Southern Denmark
-
Worldwide
-
2 users
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">International Students - Campus Sønderborg - University of Southern Denmark</span>
<span class="meta">
tight group
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Worldwide</span>
<span class="meta">
Shared group
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<picture class="avatar avatar-feature-circle">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">2 users</span>
<span class="meta">
Duo team
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Addons
Buttons
-
ECCO Shoes, United Kingdom
-
ECCO Golf -
Outdoor Men of ECCO and Fasionable Women across th whoel worldd
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<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 Shoes, United Kingdom</span>
<span class="meta">Facebook</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<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>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Outdoor Men of ECCO and Fasionable Women across th whoel worldd</span>
<span class="meta">3 Facebook Pages</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
</ul>
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="40" height="40" alt="Kalinka Nikiforova">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Kalinka Nikiforova</span>
<span class="meta">Admin</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="dropdown">
<button class="btn btn-default btn-sm" data-toggle="dropdown"><span>is owner</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">is owner</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">can edit</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">can view</span>
</a>
</li>
</ul>
</div>
</div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="40" height="40" alt="Kalinka Nikiforova">
<img src="assets/images/samples/avatar-user-2.jpg" width="40" height="40" alt="Jordan">
<img src="assets/images/samples/avatar-user-3.jpg" width="40" height="40" alt="Anita Moore">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Authors in Denmark</span>
<span class="meta">34 users</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="dropdown">
<button class="btn btn-default btn-sm" data-toggle="dropdown"><span>can edit</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">is owner</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">can edit</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">can view</span>
</a>
</li>
</ul>
</div>
</div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="card">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-2.jpg" width="40" height="40" alt="Ivan Ivanov">
</picture>
<div class="data">
<div class="cell">
<div class="holder">
<span class="name">Ivan Ivanov</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="dropdown">
<button class="btn btn-default btn-sm" data-toggle="dropdown"><span>can view</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">is owner</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">can edit</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">can view</span>
</a>
</li>
</ul>
</div>
</div>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</li>
</ul>
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Sofia, Bulgaria <span class="meta">+20 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Copenhagen, Denmark <span class="meta">+20 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">United States of America, Alaska and all related countries <span class="meta">+120 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
</ul>
Controllers
Here's an example with checkboxes as addons:
-
Branding fans Global
-
Webclicks DK social media interesser
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-1" type="checkbox" checked="checked">
<label for="list-blocks-checkbox-example-1"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media interesser</span>
<span class="meta"><span>Post engagement</span><span>13—65 years old</span><span>Bulgaria</span><span>Desktop feed and Mobile feed</span><span>ongoing</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-2" type="checkbox">
<label for="list-blocks-checkbox-example-2"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
<span class="meta"><span>Website clicks</span><span>13—65 years old</span><span>2 hours left</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="chk chk-box">
<input id="list-blocks-checkbox-example-3" type="checkbox">
<label for="list-blocks-checkbox-example-3"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Here's an example with switchers as addons:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike excluded audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-1" checked="checked">
<label for="list-blocks-switch-checkbox-example-1">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-2" disabled="disabled">
<label for="list-blocks-switch-checkbox-example-2">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike excluded audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-3">
<label for="list-blocks-switch-checkbox-example-3">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Others
Here's an example with icon links as addons:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
excluded <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
included <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
excluded <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Here's an example with meta texts as addons:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">excluded</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">included</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="meta">235</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Here's an example with icons as addons:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<svg type="gl-18-info"></svg>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Alternative sizes
Tight
The minimal height of the items in a tight list is 40px.
Basic example:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Example with buttons:
View source
Copy to clipboard
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Sofia, Bulgaria <span class="meta">+20 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Copenhagen, Denmark <span class="meta">+20 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">United States of America, Alaska and all related countries <span class="meta">+120 km</span></span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btn-group">
<a class="btn btn-transparent">
<svg type="gl-18-gear"></svg>
</a>
<a class="btn btn-transparent">
<svg type="gl-18-trash"></svg>
</a>
</div>
</div>
</li>
</ul>
Example with icon links with dropdowns:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
excluded <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
included <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="dropdown">
<a class="link icon-link" data-toggle="dropdown">
excluded <svg type="gl-16-caretb"></svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">included</span>
</a>
</li>
<li class="dropdown-item active">
<a href="javascript:;">
<span class="text">excluded</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Example with switchers:
-
Branding fans Global
-
Webclicks DK social media
-
Website clicks DK - KP users, visitors, Lookalike excluded audience, youths, auto genrated audience
View source
Copy to clipboard
<ul class="list-blocks list-blocks-tight">
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Branding fans Global</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-4" checked="checked">
<label for="list-blocks-switch-checkbox-example-4">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Webclicks DK social media</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-5" disabled="disabled">
<label for="list-blocks-switch-checkbox-example-5">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-item">
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<span class="text">Website clicks DK - KP users, visitors, Lookalike excluded audience, youths, auto genrated audience</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="inner">
<div class="data">
<div class="cell">
<div class="holder">
<div class="switcher">
<input type="checkbox" id="list-blocks-switch-checkbox-example-6">
<label for="list-blocks-switch-checkbox-example-6">
<span class="switch"><a><i></i></a></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Categories
View source
Copy to clipboard
<ul class="list-categories">
<li class="list-item">
<a class="main link icon-link">
Type <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Notes <svg type="gl-18-caretr"></svg>
</a>
</li>
<li class="list-item">
<a class="main link icon-link">
Zendesk <svg type="gl-18-caretr"></svg>
</a>
</li>
</ul>
Messages
Basic
Here's how a basic message should look like:
For best display of your carousel ad use at least 3 images.
View source
Copy to clipboard
<div class="msg">
<div class="main">
<p>For best display of your carousel ad use at least 3 images.</p>
</div>
</div>
Addons
Every message text can be surrounded by different content. There is a prepared markup for two kinds of addons so far: icons and buttons.
Icons
We recommend to use up to 5 images. Maximum allowed are 10 images. Learn more.
View source
Copy to clipboard
<div class="msg">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>We recommend to use up to 5 images. Maximum allowed are 10 images. <a class="link">Learn more</a>.</p>
</div>
</div>
Buttons
Oops, uploading failed because of some technical issues or poor internet connection. Do you want to start over?
View source
Copy to clipboard
<div class="msg">
<div class="main">
<p>Oops, uploading failed because of some technical issues or poor internet connection. Do you want to start over?</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent">Start uploading again</a>
<a class="btn btn-transparent">Skip uploading</a>
</div>
</div>
</div>
Features
Background
Add msg-bgr-white class to the message container to have a white message.
View source
Copy to clipboard
<!-- This container is just for the example needs -->
<div style="background-color: #ccc; padding: 10px; margin: -10px">
<!-- / -->
<div class="msg msg-bgr-white">
<div class="main">
<p>Here you can reactivate inactive channels. Only admins of a channel can reactivate it.</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
Sizes
Small (34px)
Add msg-size-small class to the msg container.
View source
Copy to clipboard
<div class="msg msg-size-small">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>This will stop the upload. Are you sure?</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent btn-sm">Yes</a>
<a class="btn btn-transparent btn-sm">No</a>
</div>
</div>
</div>
Modals
Types
There are two types of modals:
Basic
View source
Copy to clipboard
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basic-modal-example">
Launch basic modal
</button>
<div class="modal fade" id="basic-modal-example" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Basic modal</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close">
<svg type="gl-18-cross"></svg>
</button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
This is just a simple basic modal dialog. Do you like it?
</div>
</div>
</div>
<div class="modal-footer">
<div class="flex flex-ai-center flex-jc-flex-end">
<div class="flex-g-1 text-left">
<b class="badge"><span>99</span></b> Channels selected
</div>
<a class="btn btn-default" data-dismiss="modal">No</a>
<a class="btn btn-primary" data-dismiss="modal">Yes</a>
</div>
</div>
</div>
</div>
</div>
Fullscreen
Note: Fullscreen modals cannot behave properly without .modal-header and .bar containers. Make sure both of them are part of the HTML structure!
View source
Copy to clipboard
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fullscreen-modal-example">
Launch fullscreen modal
</button>
<div class="modal modal-fullscreen" id="fullscreen-modal-example" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Fullscreen modal</label>
<a class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></a>
</div>
<div class="bar bar-border-side-none bar-border-side-bottom bar-border-color-alpha">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-default">Left button</a>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<a class="btn btn-default"><svg type="gl-18-trash"></svg></a>
<a class="btn btn-default">Right button</a>
</div>
</div>
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Features
Tall mode
Note: Tall mode is available for basic modals only.
To set a tall mode add modal-ft-tall class to the .modal container.
View source
Copy to clipboard
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-feature-full-height">
Open modal
</button>
<div class="modal fade modal-ft-tall" id="modal-feature-full-height" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Tall mode</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
This is just a simple basic modal dialog. Do you like it?
</div>
</div>
</div>
<div class="modal-footer cf">
<div class="pull-left">
<a class="btn btn-secondary" data-dismiss="modal">Close</a>
</div>
<div class="pull-right">
<a class="btn btn-default" data-dismiss="modal">No</a>
<a class="btn btn-primary" data-dismiss="modal">Yes</a>
</div>
</div>
</div>
</div>
</div>
Layouts
Long content
View source
Copy to clipboard
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-layout-long-content">
Open modal
</button>
<div class="modal fade" id="modal-layout-long-content" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Layout: Long content</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor a nulla ac dignissim. Vestibulum pulvinar, risus sit amet ullamcorper ullamcorper, nulla justo ultricies metus, sed fermentum risus massa a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam et turpis in ligula tristique molestie non quis mauris. In hac habitasse platea dictumst. In nulla magna, feugiat vel nunc vitae, laoreet hendrerit ipsum. Quisque consequat libero non ligula faucibus fermentum. Ut et tortor ac tellus placerat sodales. Aliquam luctus pretium sagittis. Donec maximus turpis neque. Nullam in dictum sapien. Pellentesque eu tempor enim, nec mattis mi. Proin ut tempus diam. Sed nunc dui, laoreet eu malesuada sagittis, consequat a ipsum. Sed faucibus ante eget auctor hendrerit. In eu laoreet lectus.</p>
<p>Praesent at scelerisque nisl. Sed interdum turpis nec fringilla convallis. Curabitur quis dui metus. Integer condimentum lectus turpis, vitae iaculis tortor gravida at. Quisque tincidunt scelerisque libero. Curabitur faucibus nec lectus non scelerisque. Vivamus tempus ut lorem in efficitur. In euismod nibh vel odio facilisis, quis auctor urna commodo. Duis porta mauris erat, ultrices vestibulum urna vehicula ut. Integer luctus libero id arcu accumsan, venenatis scelerisque massa sodales. Quisque faucibus velit felis, a auctor orci mollis eget. Phasellus sed mattis massa. Fusce faucibus luctus mi nec laoreet. Curabitur lectus sapien, ultricies ut imperdiet ac, egestas ac lectus.</p>
<p>Praesent viverra arcu eget nisl scelerisque mollis. Vivamus facilisis tempus lectus, volutpat sodales arcu accumsan ut. Pellentesque justo nisl, maximus nec neque ut, fringilla scelerisque arcu. Curabitur consequat porttitor enim, et lacinia massa auctor vel. Aliquam ac libero eget leo auctor malesuada ac et tortor. Vestibulum eu dolor ex. Aliquam venenatis, odio et malesuada finibus, turpis sem cursus diam, eu iaculis est risus non nisi. Suspendisse in scelerisque justo. Phasellus in tellus a augue suscipit vehicula ac sed tortor. Quisque tincidunt nisl vel ipsum rhoncus suscipit id vel urna. Quisque pretium lacus risus, vitae finibus ligula efficitur eu. Ut scelerisque sit amet nisl vitae fermentum. Quisque accumsan ac lectus porta semper. Maecenas faucibus sed ligula eu consectetur. Suspendisse faucibus sapien neque, in faucibus tortor efficitur et. In tempus ac velit id vestibulum.</p>
<p>Sed sem nulla, pulvinar a posuere eu, viverra ac velit. Nunc aliquam erat laoreet finibus tincidunt. Proin lacinia sodales porta. Aliquam id blandit risus. Quisque tempus eleifend erat consequat faucibus. Pellentesque elementum dapibus sapien et dictum. Suspendisse consequat, ipsum a ornare commodo, nulla ante euismod nibh, nec interdum tellus neque a urna. Maecenas sodales pellentesque rhoncus. Curabitur vel ex non libero luctus suscipit sed sit amet risus. Suspendisse non elit vitae leo facilisis eleifend tincidunt in sem. Quisque tincidunt ex et diam semper ornare. Fusce cursus sit amet dui ac ullamcorper. Nulla ut sem ullamcorper, molestie nulla nec, rhoncus neque. Vivamus enim turpis, iaculis a scelerisque eu, pellentesque non velit. Aenean sodales facilisis imperdiet. Etiam nec libero sed libero sagittis tincidunt eu ac risus.</p>
<p>Ut tincidunt mi metus, eget pharetra arcu malesuada eget. Pellentesque sollicitudin purus felis, eu pretium felis gravida vel. Aliquam id pulvinar purus. Proin quis odio sed risus accumsan tincidunt et vel nulla. Proin fringilla, elit quis malesuada pretium, mi tortor consectetur arcu, eu facilisis metus velit in metus. Mauris fringilla cursus blandit. Suspendisse volutpat neque ac neque interdum, vel semper lorem convallis. Mauris eu consectetur erat. Maecenas accumsan magna ac tellus mollis tristique. Morbi id arcu lacus. Fusce at enim pretium leo tempor egestas in non libero. Mauris gravida pellentesque justo, a porta lorem elementum eu. Proin vel semper tortor.</p>
<p>Etiam nec dolor enim. Vivamus metus enim, finibus ac velit vel, porttitor dapibus enim. In eu condimentum nibh. Proin porta iaculis tortor, ac egestas arcu feugiat at. Nunc ac luctus lorem, quis bibendum tellus. Suspendisse id ex ac lectus aliquam lacinia in non ex. Aenean risus nulla, hendrerit non maximus ac, ornare eget leo. In ut nisl non dolor ullamcorper hendrerit.</p>
<p>Suspendisse potenti. Morbi maximus sollicitudin placerat. Curabitur congue risus odio, sed pellentesque sapien lobortis ut. In vestibulum erat enim, sit amet venenatis justo posuere in. Integer at nibh felis. Duis semper congue velit, id pretium enim porttitor sit amet. Quisque iaculis libero vitae posuere blandit. Praesent varius odio nec ligula laoreet facilisis. Nulla pulvinar sagittis urna, lacinia semper orci porttitor ultrices. Fusce augue turpis, consequat ut luctus vitae, vestibulum eget lacus. Sed justo odio, feugiat eu ornare in, fringilla vel lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Suspendisse hendrerit, felis nec lacinia semper, sem tortor elementum diam, sit amet suscipit ligula nibh id quam. Nunc fringilla faucibus odio, eu interdum metus sodales sit amet. Duis leo nisl, volutpat auctor commodo at, sodales et libero. Aenean suscipit mi tempus turpis vehicula tincidunt. Pellentesque iaculis mattis lorem, at posuere ligula convallis vitae. Mauris consequat erat id massa dapibus imperdiet. Donec dapibus nibh a rutrum imperdiet. Nulla vulputate arcu et nibh congue, eget ultricies arcu accumsan. Curabitur eu facilisis turpis.</p>
<p>Nunc condimentum dignissim vestibulum. Curabitur eu nisi ultricies, sagittis sem id, condimentum erat. Donec ac feugiat nisl. Vivamus vel justo odio. Etiam id elit ut mauris molestie fringilla eget at dolor. Morbi non leo sed ligula imperdiet laoreet. Ut at mollis ante.</p>
<p>Pellentesque aliquam neque vitae elit sagittis facilisis. Sed ac enim sed leo posuere ultricies. Proin luctus neque vel nunc finibus eleifend. Suspendisse quis mollis nisi, consectetur feugiat lorem. Duis laoreet arcu ut ipsum iaculis, sed blandit magna posuere. Vivamus at congue est, eu fermentum enim. Aliquam vehicula congue dolor sed bibendum. Mauris eros lacus, congue vel mi non, venenatis luctus nisi. Sed sed turpis tempus, volutpat dolor ut, sodales lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-secondary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</div>
Two columns
View source
Copy to clipboard
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-layout-two-columns">
Open modal
</button>
<div class="modal fade modal-ft-tall" id="modal-layout-two-columns" tabindex="-1" role="dialog">
<div class="modal-dialog modal-w-920" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title">Tall mode</label>
<button type="button" class="btn btn-transparent close" data-dismiss="modal" aria-label="Close"><svg type="gl-18-cross"></svg></button>
</div>
<div class="modal-body">
<div class="panel">
<div class="panel-body pv0">
<div class="row">
<div class="col-md-4 col-lg-4">
</div>
<div class="col-md-8 col-lg-8">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="flex flex-ai-center flex-jc-flex-end">
<a class="btn btn-secondary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</div>
Navs
Basic
View source
Copy to clipboard
<ul class="nav nav-tree" style="max-width: 250px">
<li class="active">
<a>First pill</a>
</li>
<li>
<a>Second pill</a>
</li>
<li>
<a>Third pill</a>
</li>
</ul>
Accordion
Automatic
Add data-parent attribute on each toggle link and set the value to the parent container's ID.
View source
Copy to clipboard
<ul id="nav-accordion-example" class="nav nav-tree nav-accordion" style="max-width: 250px">
<li class="panel">
<a data-toggle="collapse" href="#acc1-first-sub" data-parent="#nav-accordion-example" aria-expanded="true">First item <svg type="gl-18-caretr"></svg></a>
<div id="acc1-first-sub" class="collapse in">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li class="active">
<a>Second sub</a>
</li>
</ul>
</div>
</li>
<li class="panel">
<a data-toggle="collapse" href="#acc1-second-sub" data-parent="#nav-accordion-example">Second item <svg type="gl-18-caretr"></svg></a>
<div id="acc1-second-sub" class="collapse">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</div>
</li>
<li class="panel">
<a data-toggle="collapse" href="#acc1-third-sub" data-parent="#nav-accordion-example">Third item <svg type="gl-18-caretr"></svg></a>
<div id="acc1-third-sub" class="collapse">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</div>
</li>
</ul>
Manual
View source
Copy to clipboard
<ul class="nav nav-tree nav-accordion" style="max-width: 250px">
<li class="panel">
<a data-toggle="collapse" href="#acc2-first-sub" aria-expanded="true">First item <svg type="gl-18-caretr"></svg></a>
<div id="acc2-first-sub" class="collapse in">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li class="active">
<a>Second sub</a>
</li>
</ul>
</div>
</li>
<li class="panel">
<a data-toggle="collapse" href="#acc2-second-sub">Second item <svg type="gl-18-caretr"></svg></a>
<div id="acc2-second-sub" class="collapse">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</div>
</li>
<li class="panel">
<a data-toggle="collapse" href="#acc2-third-sub">Third item <svg type="gl-18-caretr"></svg></a>
<div id="acc2-third-sub" class="collapse">
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</div>
</li>
</ul>
Tree Checklist
View source
Copy to clipboard
<ul class="nav nav-tree nav-tree-checklist">
<li class="panel level1" id="branch1" aria-expanded="true">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr"></svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-1">First item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1" type="checkbox">
<label for="tcl-checkbox-example-1"></label>
</div>
</div>
</li>
<li class="panel level2" data-parent="#branch1" id="branch11" aria-expanded="true">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr"></svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-1-1">Level 2 First item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-1" type="checkbox">
<label for="tcl-checkbox-example-1-1"></label>
</div>
</div>
</li>
<li class="panel level3" data-parent="#branch11">
<div class="addon"></div>
<div class="main">
<label for="tcl-checkbox-example-1-1-1">Level 3 First item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-1-1" type="checkbox">
<label for="tcl-checkbox-example-1-1-1"></label>
</div>
</div>
</li>
<li class="panel level2" data-parent="#branch1">
<div class="addon"></div>
<div class="main">
<label for="tcl-checkbox-example-1-2">Level 2 Second item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-1-2" type="checkbox">
<label for="tcl-checkbox-example-1-2"></label>
</div>
</div>
</li>
<li class="panel level1" id="branch2">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr"></svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-2">Second item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-2" type="checkbox">
<label for="tcl-checkbox-example-2"></label>
</div>
</div>
</li>
<li class="panel level1" id="branch3">
<div class="addon">
<a aria-expanded="false">
<svg type="gl-18-caretr"></svg>
</a>
</div>
<div class="main">
<label for="tcl-checkbox-example-3">Third item</label>
<div class="chk chk-box">
<input id="tcl-checkbox-example-3" type="checkbox">
<label for="tcl-checkbox-example-3"></label>
</div>
</div>
</li>
</ul>
Scrollspy
Two-levels
View source
Copy to clipboard
<ul class="nav nav-tree nav-scrollspy" style="max-width: 250px">
<li class="active">
<a>First item</a>
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li class="active">
<a>Second sub</a>
</li>
</ul>
</li>
<li>
<a>Second item</a>
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</li>
<li>
<a>Third item</a>
<ul class="nav">
<li>
<a>First sub</a>
</li>
<li>
<a>Second sub</a>
</li>
</ul>
</li>
</ul>
Three-levels
View source
Copy to clipboard
<ul class="nav nav-tree nav-scrollspy" style="max-width: 250px">
<li class="active">
<a>First item</a>
<ul class="nav">
<li class="active">
<a>Second level item</a>
<ul class="nav">
<li>
<a>Third level item</a>
</li>
<li>
<a>Third level item</a>
</li>
<li class="active">
<a>Third level item</a>
</li>
</ul>
</li>
<li>
<a>Second level item</a>
</li>
</ul>
</li>
<li>
<a>Second item</a>
<ul class="nav">
<li>
<a>Second level item</a>
<ul class="nav">
<li>
<a>Third level item</a>
</li>
<li>
<a>Third level item</a>
</li>
</ul>
</li>
<li>
<a>Second level item</a>
<ul class="nav">
<li>
<a>Third level item</a>
</li>
<li>
<a>Third level item</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Notifications
Basic
Here's how a basic notification should look like:
Info message.
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="main">
<p>Info message.</p>
</div>
</div>
</div>
</div>
Addons
Every notification text can be surrounded by different content. There is a prepared markup for three kinds of addons so far: buttons, avatars and icons. They must be wrapped in a container with an addon class as follows:
Buttons
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="main">
<p>Sent for publishing on “Komfo.bg”.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
Jonas Als has just shared a dashboard with you.
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="main">
<p>Jonas Als has just shared a dashboard with you.</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent">View the dashboard</a>
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
</div>
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="main">
<p>You’ve just made a change to the “Facebook overview” dashboard.</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent">OK</a>
<a class="btn btn-transparent">Undo</a>
</div>
</div>
</div>
</div>
</div>
Icons
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>You’ve just made a change to the “Facebook overview” dashboard.</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent">OK</a>
<a class="btn btn-transparent">Undo</a>
</div>
</div>
</div>
</div>
</div>
Avatars
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="addon">
<picture class="avatar avatar-feature-circle">
<img src="assets/images/samples/avatar-user-1.jpg" width="34" height="34" alt="Kalinka Nikiforova">
</picture>
</div>
<div class="main">
<p>Kalinka Nikiforova just made a change to this dashboard.</p>
</div>
<div class="addon">
<div class="btn-group">
<a class="btn btn-transparent">View changes</a>
</div>
</div>
</div>
</div>
</div>
States
There are currently three states of notification alerts: fail, success and in progress.
Note: There is no need of any additional classes to be placed to get a specific state. It's all in the glyph icon.
Fail
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Failed publishing on “Komfo.bg”.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
Success
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="addon">
<div class="icon">
<svg type="gl-18-tick"></svg>
</div>
</div>
<div class="main">
<p>Successfully published on “Komfo.bg”.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
In progress
View source
Copy to clipboard
<div class="notif">
<div class="holder">
<div class="table">
<div class="addon">
<div class="icon">
<svg type="gl-18-info"></svg>
</div>
</div>
<div class="main">
<p>Sent for publishing on “Komfo.bg”.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
Features
Block
Add notif-block class to the notif container and it will become a block element.
View source
Copy to clipboard
<div class="notif notif-block">
<div class="holder">
<div class="table">
<div class="main text-center">
<p>Maximum 50 photos per album could be published.</p>
</div>
<div class="addon">
<a class="btn btn-transparent"><svg type="gl-18-cross"></svg></a>
</div>
</div>
</div>
</div>
Collector
All popped up notifications have to be collected in a container with a notif-collector class. Click on the button to see a real example how it should look like.
Jonas Als has just shared a dashboard with you.
Oops, renaming of “Fans Growth” widget failed.
Paginations
View source
Copy to clipboard
<div class="pagination">
<div class="pagination-dialog">
<p>channels <span class="count">1 – 50</span> of <span class="total">6,578</span></p>
<div class="btn-group controllers">
<a class="btn btn-sm btn-transparent disabled"><svg type="gl-18-caretl"></svg></a>
<a class="btn btn-sm btn-transparent"><svg type="gl-18-caretr"></svg></a>
</div>
</div>
</div>
Tabs
Basic
This is the content of the first tab which is active by default.
This is the content of the second tab.
This is the content of the third tab.
View source
Copy to clipboard
<ul class="nav nav-tabs mb5">
<li class="active">
<a href="#tabs-basic-first" data-toggle="tab">
<span><svg type="gl-18-text"></svg></span>
First tab
</a>
</li>
<li>
<a href="#tabs-basic-second" data-toggle="tab">
<span><svg type="gl-18-photo"></svg></span>
Second tab
</a>
</li>
<li>
<a href="#tabs-basic-third" data-toggle="tab">
<span><svg type="gl-18-photo-album"></svg></span>
Third tab
</a>
</li>
<li class="disabled">
<a href="#tabs-basic-fourth" data-toggle="tab">
<span><svg type="gl-18-camera"></svg></span>
Fourth tab
</a>
</li>
</ul>
<div class="panel">
<div class="panel-body tab-content">
<div role="tabpanel" class="tab-pane active" id="tabs-basic-first">
This is the content of the first tab which is active by default.
</div>
<div role="tabpanel" class="tab-pane" id="tabs-basic-second">
This is the content of the second tab.
</div>
<div role="tabpanel" class="tab-pane" id="tabs-basic-third">
This is the content of the third tab.
</div>
</div>
</div>
Tooltips
Faces
Default
Target for default tooltip
View source
Copy to clipboard
<span class="tooltip-face-default" title="A default tooltip.">
Target for default tooltip
</span>
$('.tooltip-face-default').qtip({
style: { classes: 'tooltip-default' },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Target for default tooltip
View source
Copy to clipboard
<span class="tooltip-face-default-red">
Target for default tooltip
</span>
$('.tooltip-face-default-red').qtip({
content: {
text: 'A default tooltip with red background-color.'
},
style: { classes: 'tooltip-default tooltip-default-red' },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Rich
Cards list
-
Kalinka Nikiforova
-
International Students
-
Worldwide
-
Kalinka Nikiforova
-
International Students
-
Worldwide
-
Kalinka Nikiforova
-
International Students
-
Worldwide
Target for rich tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-face-rich-cards-list">
Target for rich tooltip
</span>
$('.tooltip-face-rich-cards-list').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-rich-content-cards-list').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Sentiments
Target for sentiments tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-sentiments-target">
Target for sentiments tooltip
</span>
$('.tooltip-sentiments-target').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-sentiments').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Popover user
Based on rich tooltip
Angelina Brandelin Jolie
29 Dec 2017
2 hours ago
42
This user just started interacting recently. The data will be available from tomorrow.
Click to add a note and hit enter to save
Good customer service means having thorough knowledge of your inventory, experience with your products, and being able to help customers make the best choices for them.
Target for popover user
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-popover-user-target">
Target for popover user
</span>
$('.tooltip-popover-user-target').qtip({
style: { classes: 'tooltip-rich popover-user' },
content: {
text: $('.tooltip-popover-user').clone(),
button: true
},
show: {
event: 'click'
},
hide: {
event: 'unfocus',
fixed: true
},
close: true,
position: {
my: 'left top',
at: 'right top',
viewport: $(window),
adjust: {
method: 'flip shift'
}
},
events: {
show: function(event, api) {
editMode();
innerTooltip();
}
}
});
// These functions are just for example purposes
function editMode() {
$('[data-type="editable"]').click(function () {
$(this).addClass('hidden');
$(this).siblings('.textfield').removeClass('hidden').focus();
});
}
function innerTooltip() {
$('.inner-tooltip').qtip({
style: { classes: 'tooltip-default' },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
}
Simple list
- Brand Engagement
- Social Media
- Label With Veeery Long Content That Needs To Be Truncated
- Mobile Installs
- Social Media
- Lead Generations
- Brand Engagement
- Social Media
- Complains
- Happy Fans
- 138 more ...
- Post type 0
- Dark posts 12
- Ads boost 345
- Something veeeeeeery long content that need to be truncated 999,9M
- Labels 876
- Channels 54
- Post type Status • Link • Photo • Photo album • Video
- Dark posts Show only dark posts with no reach
- Performance Viral • Engaging • Penetration • Spammy
- Ads boost Show only dark ads boosted posts
- Labels Brand Engagement • Social Media • Website Conversions • Mobile Installs • Complains • 35 more
- Faceook Comments 1
- Replies 23
- Private Messages 456
- Something very long that needs to be truncated Mobile engagement and more long stuff that needs to be truncated 999,9M
- Google+ Comments 9
- Twitter Retweets 87
- YouTube Comments 654
- Linkedin groups Comments 32
- Linkedin Pages Comments 1
Plain text:
Target for rich tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-face-rich-simple-list-plain-text">
Target for rich tooltip
</span>
$('.tooltip-face-rich-simple-list-plain-text').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-rich-content-simple-list-plain-text').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Stats:
Target for rich tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-face-rich-simple-list-stats">
Target for rich tooltip
</span>
$('.tooltip-face-rich-simple-list-stats').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-rich-content-simple-list-stats').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Definitions:
Target for rich tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-face-rich-simple-list-definitions">
Target for rich tooltip
</span>
$('.tooltip-face-rich-simple-list-definitions').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-rich-content-simple-list-definitions').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Combined:
Target for rich tooltip
View source
Copy to clipboard
<span class="tooltip-face-rich tooltip-face-rich-simple-list-combined">
Target for rich tooltip
</span>
$('.tooltip-face-rich-simple-list-combined').qtip({
style: { classes: 'tooltip-rich' },
content: { text: $('.tooltip-rich-content-simple-list-combined').clone() },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
},
hide: {
fixed: true,
delay: 300
}
});
Positions
Top
Target for rich tooltip on top-left
$('.tooltip-tl').qtip({
content: {
text: 'A rich left-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Target for rich tooltip on top-center
View source
Copy to clipboard
<span class="tooltip-tc">
Target for rich tooltip on top-center
</span>
$('.tooltip-tc').qtip({
content: {
text: 'A rich center-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Target for rich tooltip on top-right
View source
Copy to clipboard
<span class="tooltip-tr">
Target for rich tooltip on top-right
</span>
$('.tooltip-tr').qtip({
content: {
text: 'A rich right-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'bottom right',
at: 'top right',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Bottom
Target for rich tooltip on bottom-left
View source
Copy to clipboard
<span class="tooltip-bl">
Target for rich tooltip on bottom-left
</span>
$('.tooltip-bl').qtip({
content: {
text: 'A rich left-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'top left',
at: 'bottom left',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Target for rich tooltip on bottom-center
View source
Copy to clipboard
<span class="tooltip-bc">
Target for rich tooltip on bottom-center
</span>
$('.tooltip-bc').qtip({
content: {
text: 'A rich center-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'top center',
at: 'bottom center',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Target for rich tooltip on bottom-right
View source
Copy to clipboard
<span class="tooltip-br">
Target for rich tooltip on bottom-right
</span>
$('.tooltip-br').qtip({
content: {
text: 'A rich right-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'top right',
at: 'bottom right',
viewport: $(window),
adjust: {
method: 'shift flip'
}
}
});
Left
Target for rich tooltip on left-top
$('.tooltip-lt').qtip({
content: {
text: 'A rich top-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'right top',
at: 'left top',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});
Target for rich tooltip on left-center
View source
Copy to clipboard
<span class="tooltip-lc">
Target for rich tooltip on left-center
</span>
$('.tooltip-lc').qtip({
content: {
text: 'A rich center-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'right center',
at: 'left center',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});
Target for rich tooltip on left-bottom
View source
Copy to clipboard
<span class="tooltip-lb">
Target for rich tooltip on left-bottom
</span>
$('.tooltip-lb').qtip({
content: {
text: 'A rich bottom-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'right bottom',
at: 'left bottom',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});
Right
Target for rich tooltip on right-top
View source
Copy to clipboard
<span class="tooltip-rt">
Target for rich tooltip on right-top
</span>
$('.tooltip-rt').qtip({
content: {
text: 'A rich top-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'left top',
at: 'right top',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});
Target for rich tooltip on right-center
View source
Copy to clipboard
<span class="tooltip-rc">
Target for rich tooltip on right-center
</span>
$('.tooltip-rc').qtip({
content: {
text: 'A rich center-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'left center',
at: 'right center',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});
Target for rich tooltip on right-bottom
View source
Copy to clipboard
<span class="tooltip-rb">
Target for rich tooltip on right-bottom
</span>
$('.tooltip-rb').qtip({
content: {
text: 'A rich bottom-oriented tooltip.'
},
style: { classes: 'tooltip-rich' },
position: {
my: 'left bottom',
at: 'right bottom',
viewport: $(window),
adjust: {
method: 'flip shift'
}
}
});