Css Zero Showcase
x
1
2
3
4
5
6
7
<div class="alert alert--negative flex items-start gap" style="--column-gap: 0.75rem;" role="alert">
  <img aria-hidden="true" src="/assets/circle-alert-59fe9d2e.svg" width="16" height="16" />
  <div class="flex flex-col">
    <h1 class="font-medium leading-none mbe-1">Error</h1>
    <p class="text-sm">Your session has expired. Please log in again.</p>
  </div>
</div>
1
2
3
4
5
6
7
<div class="alert alert--negative flex items-start gap" style="--column-gap: 0.75rem;" role="alert">
  <%= image_tag "circle-alert.svg", size: 16, aria: { hidden: true } %>
  <div class="flex flex-col">
    <h1 class="font-medium leading-none mbe-1">Error</h1>
    <p class="text-sm">Your session has expired. Please log in again.</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.alert {
  border-color: var(--alert-border-color, var(--color-border));
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  color: var(--alert-color, var(--color-text));
  padding: var(--size-4);
  inline-size: var(--size-full);
  img {
    filter: var(--alert-icon-color, var(--color-filter-text));
  }
}
.alert--positive {
  --alert-border-color: var(--color-positive);
  --alert-color: var(--color-positive);
  --alert-icon-color: var(--color-filter-positive);
}
.alert--negative {
  --alert-border-color: var(--color-negative);
  --alert-color: var(--color-negative);
  --alert-icon-color: var(--color-filter-negative);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.