UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

carbondesignsystem.com

carbon-design-system/carbon-components

52 lines (48 loc) • 2.94 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert"> <div class="bx--toast-notification__details"> <h3 class="bx--toast-notification__title">Notification title</h3> <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p> <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p> </div> <button data-notification-btn class="bx--toast-notification__close-button" type="button"> <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd"> <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path> </svg> </button> </div> <div data-notification class="bx--toast-notification bx--toast-notification--info" aria-live="polite"> <div class="bx--toast-notification__details"> <h3 class="bx--toast-notification__title">Notification title</h3> <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p> <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p> </div> <button data-notification-btn class="bx--toast-notification__close-button" type="button"> <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd"> <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path> </svg> </button> </div> <div data-notification class="bx--toast-notification bx--toast-notification--success" aria-live="polite"> <div class="bx--toast-notification__details"> <h3 class="bx--toast-notification__title">Notification title</h3> <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p> <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p> </div> <button data-notification-btn class="bx--toast-notification__close-button" type="button"> <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd"> <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path> </svg> </button> </div> <div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert"> <div class="bx--toast-notification__details"> <h3 class="bx--toast-notification__title">Notification title</h3> <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p> <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p> </div> <button data-notification-btn class="bx--toast-notification__close-button" type="button"> <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd"> <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path> </svg> </button> </div>