marble
Version:
WeDeploy's style guide and UI components
728 lines (677 loc) • 22.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Topbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
<link rel="stylesheet" href="../build/marble.css">
<style type="text/css">
h1 {
margin: 96px 20px 24px;
}
hr {
margin-top: 96px;
border: 2px dashed black;
}
.topbar.topbar-light {
box-shadow: 0px 2px 8px rgba(12, 14, 26, 0.1);
}
</style>
</head>
<body>
<h1>Topbar Default: Logo Text</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<h3 class="topbar-logo-text">Metal.js</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Default: Logo Icon</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Default: Logo Icon + Text</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
<h3 class="topbar-logo-text">Github</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Default: Logo Image</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="logo.svg">
</a>
</div>
<div class="topbar-list-container">
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="undefined" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</div>
</nav>
<h1>Topbar Default: Logo Image + Text</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="logo.svg">
<h3 class="topbar-logo-text">Metal.js</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Default: WeDeploy Logo</h1>
<nav class="topbar">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Default: WeDeploy Logo + Alpha tag</h1>
<nav class="topbar topbar-spacebetween">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
<span class="alpha-container">
<span class="arrow-left"></span>
<span class="alpha">alpha</span>
</span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="docs.html">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="/dashboard/login/signin">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<hr />
<h1>Topbar Light: Logo Text</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<h3 class="topbar-logo-text">Github</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Light: Logo Icon</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Light: Logo Icon + Text</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
<h3 class="topbar-logo-text">Github</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Light: Logo Image</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="http://www.gravatar.com/avatar/">
</a>
</div>
<div class="topbar-list-container">
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="undefined" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</div>
</nav>
<h1>Topbar Light: Logo Image + Text</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="http://www.gravatar.com/avatar">
<h3 class="topbar-logo-text">Gravatar</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Light: WeDeploy Logo</h1>
<nav class="topbar topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
</span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Light: WeDeploy Logo + Alpha tag</h1>
<nav class="topbar topbar-light topbar-spacebetween">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
<span class="alpha-container">
<span class="arrow-left"></span>
<span class="alpha">alpha</span>
</span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="docs.html">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="/dashboard/login/signin">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="undefined" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<hr />
<h1>Topbar Large Light: Logo Text</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<h3 class="topbar-logo-text">Github</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Large Light: Logo Icon</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Large Light: Logo Icon + Text</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="icon-12-github topbar-logo-icon"></span>
<h3 class="topbar-logo-text">Github</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Large Light: Logo Image</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="http://www.gravatar.com/avatar">
</a>
</div>
<div class="topbar-list-container">
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="undefined" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</div>
</nav>
<h1>Topbar Large Light: Logo Image + Text</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<img class="topbar-logo-image" src="http://www.gravatar.com/avatar">
<h3 class="topbar-logo-text">Gravatar</h3>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Large Light: WeDeploy Logo</h1>
<nav class="topbar topbar-large topbar-light">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
</span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="http://www.gravatar.com/avatar/f159cc42cdb1ea7b0f757474cace8c15?d=blank&s=120" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
<h1>Topbar Large Light: WeDeploy Logo + Alpha tag</h1>
<nav class="topbar topbar-large topbar-light topbar-spacebetween">
<div class="topbar-logo">
<a class="topbar-logo-link" href="#">
<span class="wedeploy-logo dashboard-logo">
<span class="we-circle"><span class="we">We</span></span>
<span class="alpha-container">
<span class="arrow-left"></span>
<span class="alpha">alpha</span>
</span>
</span>
</a>
</div>
<ul class="topbar-list">
<li class="topbar-item">
<a class="topbar-link topbar-link-selected" href="#">Apps</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="#">Documentation</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="docs.html">Docs</a>
</li>
<li class="topbar-item">
<a class="topbar-link" href="/dashboard/login/signin">Faq</a>
</li>
<li class="topbar-item topbar-avatar">
<button class="topbar-link btn-transparent">
<object class="avatar-round avatar-small" data="undefined" type="image/jpeg">
<span class="avatar-initials avatar-small">Z</span>
</object>
</button>
</li>
</ul>
</nav>
</body>
</html>