Ecco
Pagebar
<header class="pagebar" id="pagebar-example">
<div class="page-wrapper container">
<div class="row">
<div class="col col-md-9 col-lg-9">
<a class="page-logo" data-role="page-logo" data-img="komfo-icon"><i></i></a>
<nav id="main-nav" class="pull-left">
<a class="nav-distribute" href="javascript:;">Publish</a>
<a class="nav-advertise" href="javascript:;">Advertise</a>
<a class="nav-monitor" href="javascript:;">Monitor</a>
<a class="nav-measure" href="javascript:;">Measure</a>
</nav>
</div>
<div class="col col-md-3 col-lg-3">
<nav id="right-nav" class="pull-right">
<div class="ui-nav-item nav-item dropdown" data-role="nav-help">
<a class="dropdown-toggle" data-role="nav-help-trigger"><svg type="gl-18-questionmark"></svg></a>
</div>
<div class="ui-nav-item nav-item dropdown" data-role="nav-profile">
<a class="dropdown-toggle" data-role="nav-profile-trigger">
<picture class="avatar avatar-feature-circle">
</picture>
</a>
</div>
<div class="ui-nav-item nav-item dropdown" data-role="nav-master">
<a class="dropdown-toggle" data-role="nav-master-trigger">
<svg type="gl-18-dots">
</svg>
</a>
</div>
</nav>
</div>
</div>
</div>
</header>
Mainbar
Publish
<header class="mainbar" id="mainbar-example">
<div class="page-wrapper container">
<div class="row">
<div class="col col-md-12 col-lg-12">
<div class="btn-toolbar">
<div class="btn-group sections">
<a class="btn btn-primary btn-sm selected" data-type="compose">Compose</a>
<a class="btn btn-primary btn-sm" data-type="schedule">Schedule</a>
<a class="btn btn-primary btn-sm" data-type="scheduled">Scheduled</a>
<a class="btn btn-primary btn-sm" data-type="drafts">Drafts</a>
<a class="btn btn-primary btn-sm faded" data-type="published">Published</a>
</div>
</div>
</div>
</div>
</div>
</header>
Advertise
<header class="mainbar" id="mainbar-example">
<div class="page-wrapper container">
<div class="row">
<div class="col col-md-9 col-lg-9">
<div class="selectors">
<input id="select2-advertise-team-selector" type="hidden" class="select2-mainbar-selector">
<div class="dropdown ml25">
<a class="btn btn-primary" data-toggle="dropdown">
<span>Media: <strong>Facebook</strong></span>
<i class="gl"><svg type="gl-18-caretb"></svg></i>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a>
<span class="text">Facebook</span>
</a>
</li>
<li class="dropdown-item">
<a>
<span class="text">Twitter</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col col-md-3 col-lg-3 cf">
<div class="btn-group pull-right">
<a class="btn btn-primary"><svg type="gl-18-plus"></svg></a>
<a class="btn btn-primary"><svg type="gl-18-file-table"></svg></a>
<a class="btn btn-primary selected"><svg type="gl-18-gear"></svg></a>
</div>
</div>
</div>
</div>
</header>
$.ajax({
type: 'GET',
dataType: 'json',
url: '../assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-advertise-team-selector').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select',
data: response.data,
templateSelection: function(data, container) {
return $('<a class="btn btn-primary">' +
'<span>Team: <strong>' + data.text + '</strong></span>' +
'<i class="gl"><svg type="gl-18-caretb"></svg></i>' +
'</a>');
}
});
});
Monitor
<header class="mainbar" id="mainbar-example">
<div class="page-wrapper container">
<div class="row">
<div class="col col-md-6 col-lg-6">
<div class="selectors">
<input id="select2-monitor-channel-selector" type="hidden" class="select2-mainbar-selector">
</div>
</div>
<div class="col col-md-6 col-lg-6 cf">
<div class="toolbar pull-right">
<div class="btn-group">
<a class="btn btn-default selected">Filters</a>
<a class="btn btn-default"><svg type="gl-18-trash"></svg></a>
</div>
<div data-role="search">
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Search for content of users" />
<div class="textfield-addon">
<svg type="gl-18-magnifier"></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
$.ajax({
type: 'GET',
dataType: 'json',
url: '../assets/js/select2-example-data.json'
}).done(function(response) {
$('#select2-monitor-channel-selector').select2({
dropdownCssClass: 'single-dropdown',
placeholder: 'Select',
data: response.data,
templateSelection: function(data, container) {
return $('<a class="btn btn-primary">' +
'<span>Channels: <strong>' + data.text + '</strong></span>' +
'<i class="gl"><svg type="gl-18-caretb"></svg></i>' +
'</a>');
}
});
});
Measure
<header class="mainbar" id="mainbar-example">
<div class="page-wrapper container">
<div class="row">
<div class="col col-md-7 col-lg-7">
<div class="selectors">
<a class="btn btn-primary">
<span>Dashboard: <strong>Facebook</strong></span>
<i class="gl"><svg type="gl-18-caretb"></svg></i>
</a>
</div>
</div>
<div class="col col-md-5 col-lg-5 cf">
<div class="toolbar tight pull-right">
<a class="btn btn-primary"><svg type="gl-18-plus"></svg></a>
<div class="avatar-group">
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Anita Moore">
</picture>
<div class="avatar avatar-feature-circle avatar-size-small">
<span class="text">12</span>
</div>
</div>
<div class="btn-group">
<a class="btn btn-primary faded"><svg type="gl-18-user-plus"></svg></a>
<a class="btn btn-primary"><svg type="gl-18-file-table"></svg></a>
<a class="btn btn-primary selected"><svg type="gl-18-gear"></svg></a>
</div>
</div>
</div>
</div>
</div>
</header>
Manage
<header class="mainbar" id="mainbar-example">
<div class="page-wrapper container">
<div class="row flex">
<div class="col col-md-8">
<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>
</div>
<div class="col col-md-4">
<div class="flex flex-jc-flex-end">
<a class="btn btn-default" >Add channels</a>
</div>
</div>
</div>
</div>
</header>
Bars
Basic
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</div>
Content
Avatars
99
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<picture class="avatar">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Anita Moore">
</picture>
</div>
<div class="bar-item">
<picture class="avatar avatar-feature-circle">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
</div>
<div class="bar-item">
<div class="avatar-group">
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-1.jpg" width="32" height="32" alt="Kalinka Nikiforova">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
<picture class="avatar avatar-feature-circle avatar-size-small">
<img src="../assets/images/samples/avatar-user-3.jpg" width="32" height="32" alt="Anita Moore">
</picture>
<div class="avatar avatar-feature-circle avatar-size-small">
<span class="text">99</span>
</div>
</div>
</div>
<div class="bar-item">
<picture class="avatar avatar-feature-circle avatar-size-nano">
<img src="../assets/images/samples/avatar-user-2.jpg" width="32" height="32" alt="Jordan">
</picture>
</div>
<div class="bar-item">
<picture class="avatar avatar-size-big">
<img src="../assets/images/samples/avatar-channel-1.jpg" width="32" height="32" alt="ECCO">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
Buttons
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<a class="btn btn-default"><svg type="gl-18-suitcase"></svg></a>
</div>
<div class="bar-item">
<div class="btn-group">
<a class="btn btn-primary btn-sm">Left</a>
<hr>
<a class="btn btn-primary btn-sm">Middle</a>
<hr>
<a class="btn btn-primary btn-sm">Right</a>
</div>
</div>
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Inputs
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<div class="chk chk-box">
<input id="checkbox-example" type="checkbox">
<label for="checkbox-example"><span>Check</span></label>
</div>
</div>
<div class="bar-item">
<div class="textfield">
<div class="textfield-addon">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown"><span>Dropdown</span> <svg type="gl-18-caretb"></svg></button>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Another item</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Something else</span>
</a>
</li>
<li class="dropdown-item">
<a href="javascript:;">
<span class="text">Last item</span>
</a>
</li>
</ul>
</div>
</div>
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Type your text here" />
<div class="textfield-addon">
<span class="data">999</span>
</div>
</div>
</div>
</div>
<div class="bar-item">
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="radio-example-a" type="radio" name="radio-example">
<label for="radio-example-a"><span>First</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-b" type="radio" name="radio-example">
<label for="radio-example-b"><span>Second</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Texts
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item oh">
<div class="text-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut consectetur dicta, inventore mollitia non obcaecati quisquam quod repudiandae veniam! Enim est expedita fuga ipsum itaque necessitatibus odio praesentium quam?</div>
</div>
<div class="bar-item">
<a class="btn btn-sm btn-default">OK</a>
</div>
</div>
</div>
</div>
</div>
</div>
Cards
3 users
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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">Facebook</span>
</div>
</div>
</div>
</div>
</div>
<div class="bar-item">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
Tags
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="flex">
<div class="flex mt10">
<div class="bar-item nowrap">
<span class="meta text-size-12">Filtered by:</span>
</div>
</div>
<div class="flex flex-g-1 text-overflow mh10 mt10">
<div class="tags">
<span class="tag">
<span class="prefix">$</span>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<span class="prefix">$</span>
<span class="main">Light tag</span>
</span>
<span class="tag">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Light tag</span>
</span>
<span class="tag">
<span class="close"></span>
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted dark tag</span>
</span>
<span class="tag tag-face-light tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted light tag</span>
</span>
</div>
</div>
<div class="flex">
<div class="bar-item">
<a class="btn btn-transparent"><svg type="gl-18-caretb"></svg></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="bar">
<div class="page-wrapper container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="flex">
<div class="flex mt10">
<div class="bar-item nowrap">
<span class="meta text-size-12">Filtered by:</span>
</div>
</div>
<div class="flex flex-g-1 oh mh10 mt10">
<div class="tags oh">
<span class="tag">
<span class="prefix">$</span>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<span class="prefix">$</span>
<span class="main">Light tag</span>
</span>
<span class="tag">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Dark tag</span>
</span>
<span class="tag tag-face-light">
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="main">Light tag</span>
</span>
<span class="tag">
<span class="close"></span>
<i class="misc"><svg type="misc-exclamation-mark"></svg></i>
<span class="prefix">$</span>
<span class="main">Ooh, name it after me! No argument here. Interesting. No, wait, the other thing: tedious. So I really am important? How I feel when I'm drunk is correct? No, she'll probably make me do it. You are the last hope of the universe.</span>
</span>
<span class="tag tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted dark tag</span>
</span>
<span class="tag tag-face-light tag-highlight">
<span class="close"></span>
<span class="prefix">$</span>
<span class="main">Highlighted light tag</span>
</span>
</div>
</div>
<div class="flex">
<div class="bar-item">
<a class="btn btn-transparent"><svg type="gl-18-carett"></svg></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Background
There are three possible background colors: white, silver and transparent.
While the white background is by default, here are the other variants:
Silver
Add a bar-bgr-silver class to the bar container.
<div class="bar bar-bgr-silver">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Transparent
Add a bar-bgr-transparent class to the bar container.
<div class="bar bar-bgr-transparent">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Border
Visibility
There are four possible states of the border visibility around the bar.
While the default state is a bar with a complete border, here are the other variants:
None
<div class="bar bar-border-side-none">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Top
<div class="bar bar-border-side-top">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Bottom
<div class="bar bar-border-side-bottom">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Colors
There are two possible border colors: gray and alpha gray.
While gray is the border color by default, setting an alpha gray color requires a bar-border-color-alpha class to the bar container.
<div class="bar bar-border-color-alpha">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>
Minimal height
There are two min-height options: 34px and 40px.
While 34px is the option by default, setting a 40px of min-height requires a bar-min-height-big class to the bar container.
40px
<div class="bar bar-min-height-big">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="bar-inner flex flex-ai-center neighbourhood nowrap">
<div class="bar-item">
<div class="chk chk-box">
<input id="checkbox-example-2" type="checkbox">
<label for="checkbox-example-2"><span>Check</span></label>
</div>
</div>
<div class="bar-item">
<div class="chk-block-inline">
<div class="chk chk-btn">
<input id="radio-example-2a" type="radio" name="radio-example-2">
<label for="radio-example-2a"><span>First</span></label>
</div>
<div class="chk chk-btn">
<input id="radio-example-2b" type="radio" name="radio-example-2">
<label for="radio-example-2b"><span>Second</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Layout
There are two options of layout: one-column and two-column.
While one-column is the option by default, a two-column layout looks like this:
<div class="bar">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="flex flex-ai-center">
<div>
<div class="bar-inner flex flex-ai-center">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default">Filters</a>
</div>
</div>
</div>
</div>
<div class="flex-g-1 ml30">
<div class="bar-inner flex flex-ai-center flex-jc-flex-end neighbourhood">
<div class="btn-group">
<a class="btn btn-default">
<svg type="gl-18-gear">
</svg>
</a>
<a class="btn btn-default">
<svg type="gl-18-trash">
</svg>
</a>
<a class="btn btn-default">
<svg type="gl-18-plus">
</svg>
</a>
<div class="dropdown">
<a class="btn btn-default dropdown" data-toggle="dropdown">
<svg type="gl-18-dots">
</svg>
</a>
<ul class="dropdown-box dropdown-menu">
<li class="dropdown-item">
<a href="" class="disabled">
<span class="prefix">
<svg type="gl-18-text">
</svg>
</span>
<span class="text">Filter by</span>
</a>
</li>
<li class="dropdown-item">
<a href="" class="disabled">
<span class="prefix">
<svg type="gl-18-facebook">
</svg>
</span>
<span class="text">See in Facebook</span>
</a>
</li>
</ul>
</div>
</div>
<div class="flex-g-1 maxw350">
<div class="textfield">
<div class="textfield-area">
<input class="textfield-input" type="text" placeholder="Search">
<div class="textfield-addon">
<div class="">
<svg type="gl-18-magnifier">
</svg>
</div>
<a class="btn btn-transparent themed"><svg type="gl-18-cross">
</svg></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic example
By default, all the .panel does is apply some basic border and padding to contain some content.
Basic panel example
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
Note: You can use the panel classes on a <div>, <article> or <section> element.
Header and Footer
Easily add header and footer containers to your panel with .panel-header and .panel-footer.
Panel header
Panel content
<div class="panel">
<div class="panel-header">
Panel header
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
Faces
There are also some alternative panel faces:
Ground face
Panel header
Panel content
<div class="panel panel-ground">
<div class="panel-header">
Panel header
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
System blocks
Types
No content
Broken ad account
The token of your ad account which is connected to the current team has gone bad. You cannot advertise without a token. Go to Ad Accounts section in Settings menu or try to reactivate it now.
<div class="sys-block">
<picture class="mb30">
<svg type="sys-broken"></svg>
</picture>
<p class="ttl">Broken ad account</p>
<div class="text">
<p>The token of your ad account which is connected to the current team has gone bad. You cannot advertise without a token. <a>Go to Ad Accounts section</a> in Settings menu or try to <a>reactivate it now</a>.</p>
</div>
</div>
Error
No Audience
It seems that you don't have audiences yet. Try to create some from the button above.
<div class="sys-block">
<picture class="mb30">
<svg class="sys-col-gray sys-size-s" type="sys-no-audience"></svg>
</picture>
<p class="ttl">No Audience</p>
<div class="text">
<p>It seems that you don't have audiences yet. Try to create some from the button above.</p>
</div>
</div>