marble
Version:
WeDeploy's style guide and UI components
104 lines (93 loc) • 3.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Avatar</title>
<link rel="stylesheet" href="../build/marble.css">
<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="http://fonts.googleapis.com/css?family=Open+Sans:700,400,300">
<style>
body {
padding: 50px;
}
#alert1 {
bottom: 50px;
}
#alert2 {
bottom: 150px;
}
#alert3 {
bottom: 450px;
}
#danger1 {
bottom: 250px;
}
#danger2 {
bottom: 350px;
}
</style>
</head>
<body>
<h1>Alerts</h1>
<div class="alert alert-inline alert-warning">
<span class="icon-16-alert"></span>
<span class="alert-body">This service is getting close to its limit. <a href="http://google.com" class="alert-link">Upgrade Project</a>.</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div class="alert alert-inline alert-inline--vcenter alert-warning">
<span class="icon-16-alert"></span>
<span class="alert-body">This service is getting close to its limit. <a href="http://google.com" class="alert-link">Upgrade Project</a>.</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div id="alert1" class="alert">
<span class="spinner spinner-done"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div id="alert2" class="alert">
<span class="spinner"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div id="alert3" class="alert">
<span class="alert-body">
User was deleted successfully.<button class="alert-undo-link">undo</button>
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div id="danger1" class="alert alert-danger">
<span class="spinner spinner-done spinner-danger"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true" class="icon-16-cancel"></span>
</button>
</div>
<div id="danger2" class="alert alert-danger">
<span class="spinner spinner-danger"></span>
<span class="alert-body">
User was deleted successfully.
</span>
<button type="button" class="close" aria-label="Close" data-onclick="toggle">
<span aria-hidden="true">x</span>
</button>
</div>
</body>
</html>