UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

carbondesignsystem.com

IBM/carbon-components

69 lines (68 loc) • 4.39 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert"> <div class="bx--inline-notification__details"> <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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" /> </svg> <div class="bx--inline-notification__text-wrapper"> <p class="bx--inline-notification__title">Notification title</p> <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p> </div> </div> <button data-notification-btn class="bx--inline-notification__close-button" type="button"> <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <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" fill-rule="nonzero" /> </svg> </button> </div> <div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert"> <div class="bx--inline-notification__details"> <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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" /> </svg> <div class="bx--inline-notification__text-wrapper"> <p class="bx--inline-notification__title">Notification title</p> <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p> </div> </div> <button data-notification-btn class="bx--inline-notification__close-button" type="button"> <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <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" fill-rule="nonzero" /> </svg> </button> </div> <div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert"> <div class="bx--inline-notification__details"> <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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" /> </svg> <div class="bx--inline-notification__text-wrapper"> <p class="bx--inline-notification__title">Notification title</p> <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p> </div> </div> <button data-notification-btn class="bx--inline-notification__close-button" type="button"> <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <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" fill-rule="nonzero" /> </svg> </button> </div> <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert"> <div class="bx--inline-notification__details"> <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <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" /> </svg> <div class="bx--inline-notification__text-wrapper"> <p class="bx--inline-notification__title">Notification title</p> <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p> </div> </div> <button data-notification-btn class="bx--inline-notification__close-button" type="button"> <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <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" fill-rule="nonzero" /> </svg> </button> </div>