marble
Version:
WeDeploy's style guide and UI components
81 lines (74 loc) • 2.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Labels</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>
.label {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Types</h1>
<span class="label label-default">X <span class="label-text">Default</span></span>
<span class="label label-primary">X <span class="label-text">Primary</span></span>
<span class="label label-success">X <span class="label-text">Success</span></span>
<span class="label label-warning">X <span class="label-text">Warning</span></span>
<span class="label label-danger">X <span class="label-text">Danger</span></span>
<h1>Sizes</h1>
<span class="label label-default label-sm">Small</span>
<span class="label label-primary label-sm">Small</span>
<span class="label label-default">Regular</span>
<span class="label label-primary">Regular</span>
<h1>Icons</h1>
<span class="label label-default">
<span class="label-icon icon-12-person"></span>
Default
</span>
<span class="label label-primary">
<span class="label-icon icon-12-person"></span>
Primary
</span>
<span class="label label-success">
<span class="label-icon icon-12-person"></span>
Success
</span>
<span class="label label-warning">
<span class="label-icon icon-12-person"></span>
Warning
</span>
<span class="label label-danger">
<span class="label-icon icon-12-person"></span>
Danger
</span>
<h1>Clickable</h1>
<button class="btn-transparent label label-default label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Default</span>
</button>
<button class="btn-transparent label label-primary label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Primary</span>
</button>
<button class="btn-transparent label label-success label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Success</span>
</button>
<button class="btn-transparent label label-warning label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Warning</span>
</button>
<button class="btn-transparent label label-danger label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Danger</span>
</button>
</body>
</html>