1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert">
|
9 | <div class="bx--inline-notification__details">
|
10 | <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
11 | <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
12 | </svg>
|
13 | <div class="bx--inline-notification__text-wrapper">
|
14 | <p class="bx--inline-notification__title">Notification title</p>
|
15 | <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
|
16 | </div>
|
17 | </div>
|
18 | <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
|
19 | <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
|
20 | xmlns="http://www.w3.org/2000/svg">
|
21 | <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
|
22 | fill-rule="nonzero" />
|
23 | </svg>
|
24 | </button>
|
25 | </div>
|
26 | <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
|
27 | <div class="bx--inline-notification__details">
|
28 | <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
29 | <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z" fill-rule="evenodd" />
|
30 | </svg>
|
31 | <div class="bx--inline-notification__text-wrapper">
|
32 | <p class="bx--inline-notification__title">Notification title</p>
|
33 | <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
|
34 | </div>
|
35 | </div>
|
36 | <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
|
37 | <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
|
38 | xmlns="http://www.w3.org/2000/svg">
|
39 | <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
|
40 | fill-rule="nonzero" />
|
41 | </svg>
|
42 | </button>
|
43 | </div>
|
44 | <div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
|
45 | <div class="bx--inline-notification__details">
|
46 | <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
47 | <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-11.332L6.75 9.21 4.707 7.168 3.293 8.582 6.75 12.04l5.957-5.957-1.414-1.414z"></path>
|
48 | </svg>
|
49 | <div class="bx--inline-notification__text-wrapper">
|
50 | <p class="bx--inline-notification__title">Notification title</p>
|
51 | <p class="bx--inline-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
|
52 | </div>
|
53 | </div>
|
54 | <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
|
55 | <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
|
56 | xmlns="http://www.w3.org/2000/svg">
|
57 | <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
|
58 | fill-rule="nonzero" />
|
59 | </svg>
|
60 | </button>
|
61 | </div>
|
62 | <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
|
63 | <div class="bx--inline-notification__details">
|
64 | <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
65 | <path d="M.75 16a.75.75 0 0 1-.67-1.085L7.33.415a.75.75 0 0 1 1.34 0l7.25 14.5A.75.75 0 0 1 15.25 16H.75zm6.5-10v5h1.5V6h-1.5zM8 13.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0 1.5z"></path>
|
66 | </svg>
|
67 | <div class="bx--inline-notification__text-wrapper">
|
68 | <p class="bx--inline-notification__title">Notification title</p>
|
69 | <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
|
70 | </div>
|
71 | </div>
|
72 | <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
|
73 | <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
|
74 | xmlns="http://www.w3.org/2000/svg">
|
75 | <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
|
76 | fill-rule="nonzero" />
|
77 | </svg>
|
78 | </button>
|
79 | </div>
|