Previews

Pages

No matching results.

x
1
2
3
4
5
6
<div class="alert flex items-start" role="alert">
<span class="icon icon--circle-check" aria-hidden="true"></span>
<h5 class="font-medium leading-none mis-3">
This Alert has a title and an icon. No description.
</h5>
</div>
1
2
3
4
5
6
<div class="alert flex items-start" role="alert">
<span class="icon icon--circle-check" aria-hidden="true"></span>
<h5 class="font-medium leading-none mis-3">
This Alert has a title and an icon. No description.
</h5>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.alert {
background-color: var(--alert-background, var(--color-surface));
border-radius: var(--rounded-lg);
border: 1px solid var(--alert-border-color, var(--color-border));
color: var(--alert-color, var(--color-text));
font-size: var(--text-sm);
inline-size: var(--size-full);
padding: var(--size-4);
}
.alert--positive {
--alert-color: light-dark(var(--green-600), var(--green-400));
}
.alert--negative {
--alert-color: light-dark(var(--red-600), var(--red-400));
}
Java Script is not required or multiple files are needed, check the notes.