marble
Version:
WeDeploy's style guide and UI components
80 lines (76 loc) • 2.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Dropdowns</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:700,400,300|Open+Sans:700,400,300">
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h1>Dropdown Menu</h1>
<div class="dropdown open">
<button class="btn btn-default btn-sm dropdown-select dropdown-select-group-left" type="button">
GET
<span class="icon-12-arrow-down-short"></span>
</button>
<ul class="dropdown-menu">
<li><button class="btn-transparent">GET</button></li>
<li><button class="btn-transparent">HEAD</button></li>
<li><button class="btn-transparent">POST</button></li>
<li><button class="btn-transparent">PUT</button></li>
<li><button class="btn-transparent">PATCH</button></li>
<li><button class="btn-transparent">DELETE</button></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h1>Dropdown Menu Icon</h1>
<div class="dropdown dropdown-icon open">
<button class="btn btn-default btn-sm dropdown-select dropdown-select-group-left" type="button">
Dropdown
<span class="icon-12-arrow-down-short"></span>
</button>
<ul class="dropdown-menu">
<li>
<button class="btn-transparent">
<span class="icon-12-mail"></span>Item
</button>
</li>
<li>
<button class="btn-transparent">
<span class="icon-12-menu"></span>Item
</button>
</li>
<li>
<button class="btn-transparent">
<span class="icon-12-network"></span>Item
</button>
</li>
<li>
<button class="btn-transparent">
<span class="icon-12-pen"></span>Item
</button>
</li>
<li>
<button class="btn-transparent">
<span class="icon-12-person"></span>Item
</button>
</li>
<li>
<button class="btn-transparent">
<span class="icon-12-heart"></span>Item
</button>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>