Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
<div class="alert alert--positive flex items-start" role="alert">
  <span class="icon icon--circle-check" aria-hidden="true"></span>
  <div class="flex flex-col mis-3">
    <h5 class="font-medium leading-none mbe-1">Success</h5>
    <p>Your purchase has been confirmed.</p>
  </div>
</div>
1
2
3
4
5
6
7
<div class="alert alert--positive flex items-start" role="alert">
  <span class="icon icon--circle-check" aria-hidden="true"></span>
  <div class="flex flex-col mis-3">
    <h5 class="font-medium leading-none mbe-1">Success</h5>
    <p>Your purchase has been confirmed.</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.alert {
  background-color: var(--alert-background, var(--color-bg));
  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-background: var(--color-positive);
  --alert-border-color: transparent;
  --alert-color: white;
}
.alert--negative {
  --alert-background: var(--color-negative);
  --alert-border-color: transparent;
  --alert-color: white;
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.