UNPKG

3.5 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Demo: Avatar</title>
6
7 <link rel="stylesheet" href="../build/marble.css">
8 <link rel="stylesheet" href="../build/fonts/galano/galano.css">
9 <link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
10 <link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
11
12 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700,400,300">
13
14 <style>
15 body {
16 padding: 50px;
17 }
18 #alert1 {
19 bottom: 50px;
20 }
21 #alert2 {
22 bottom: 150px;
23 }
24 #alert3 {
25 bottom: 450px;
26 }
27 #danger1 {
28 bottom: 250px;
29 }
30 #danger2 {
31 bottom: 350px;
32 }
33 </style>
34</head>
35<body>
36 <h1>Alerts</h1>
37
38 <div class="alert alert-inline alert-warning">
39 <span class="icon-16-alert"></span>
40 <span class="alert-body">This service is getting close to its limit. <a href="http://google.com" class="alert-link">Upgrade Project</a>.</span>
41 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
42 <span aria-hidden="true" class="icon-16-cancel"></span>
43 </button>
44 </div>
45
46 <div class="alert alert-inline alert-inline--vcenter alert-warning">
47 <span class="icon-16-alert"></span>
48 <span class="alert-body">This service is getting close to its limit. <a href="http://google.com" class="alert-link">Upgrade Project</a>.</span>
49 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
50 <span aria-hidden="true" class="icon-16-cancel"></span>
51 </button>
52 </div>
53
54 <div id="alert1" class="alert">
55 <span class="spinner spinner-done">
56 <span class="icon-12-check"></span>
57 </span>
58 <span class="alert-body">
59 User was deleted successfully.
60 </span>
61 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
62 <span aria-hidden="true" class="icon-16-cancel"></span>
63 </button>
64 </div>
65
66 <div id="alert2" class="alert">
67 <span class="spinner">
68 <span class="icon-12-check"></span>
69 </span>
70 <span class="alert-body">
71 User was deleted successfully.
72 </span>
73 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
74 <span aria-hidden="true" class="icon-16-cancel"></span>
75 </button>
76 </div>
77
78 <div id="alert3" class="alert alert-dark">
79 <span class="alert-body">
80 User was deleted successfully.<button class="alert-undo-link">undo</button>
81 </span>
82 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
83 <span aria-hidden="true" class="icon-16-cancel"></span>
84 </button>
85 </div>
86
87 <div id="danger1" class="alert alert-dark alert-danger">
88 <span class="spinner spinner-done spinner-danger">
89 <span class="icon-12-close-short"></span>
90 </span>
91 <span class="alert-body">
92 User was deleted successfully.
93 </span>
94 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
95 <span aria-hidden="true" class="icon-16-cancel"></span>
96 </button>
97 </div>
98
99 <div id="danger2" class="alert alert-dark alert-danger">
100 <span class="spinner spinner-danger">
101 <span class="icon-12-close-short"></span>
102 </span>
103 <span class="alert-body">
104 User was deleted successfully.
105 </span>
106 <button type="button" class="close" aria-label="Close" data-onclick="toggle">
107 <span aria-hidden="true" class="icon-16-cancel"></span>
108 </button>
109 </div>
110</body>
111</html>