Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Alarmkomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Warnung mit Info-, Erfolgs-, Warn- und Fehlervarianten. Weicher Stil, Icon-Slot und abweisbares Muster. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
alertBaseKontextbezogenes Nachrichtenbanner
alert-outlineStilTransparente Füllung mit farbigem Rand
alert-softStilGedämpfter getönter Hintergrund
alert-ghostStilDezenter Hintergrund ohne Rand
alert-dashedStilGestrichelter Randstil
alert-pillStilVollständig abgerundete Pillenform
alert-roundedStilModerate Rundung
alert-horizontalModifikatorHorizontales Flex-Layout
alert-verticalModifikatorVertikal gestapeltes Layout
alert-xsGrößeExtra klein
alert-smGrößeKlein
alert-mdGrößeMittel (Standard)
alert-lgGrößeGroß
alert-primaryFarbePrimäre Designfarbe
alert-secondaryFarbeSekundäre Themenfarbe
alert-accentFarbeAkzentfarbe des Themas
alert-neutralFarbeNeutrale Themenfarbe
alert-infoFarbeSemantische Infofarbe
alert-successFarbeSemantische Erfolgsfarbe
alert-warningFarbeSemantische Warnungsfarbe
alert-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

1
2
3
4
<div role="alert" class="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Alert:You have 99+ new notifications.</span>
</div>

1
2
3
4
<div role="alert" className="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Alert:You have 99+ new notifications.</span>
</div>

Alarmfarben

html 
 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
<!-- Default -->
<div role="alert" class="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Default Alert.</span>
</div>
<!-- Primary -->
<div role="alert" class="alert alert-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
    <span>This is a Primary Alert.</span>
</div>
<!-- Secondary -->
 <div role="alert" class="alert alert-secondary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Secondary Alert.</span>
</div>
<!-- Accent -->
<div role="alert" class="alert alert-accent">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Accent Alert.</span>
</div>
<!-- Info -->
<div role="alert" class="alert alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Info Alert.</span>
</div>
<!-- Success -->
<div role="alert" class="alert alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Success Alert.</span>
</div>
<!-- Warning -->
<div role="alert" class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
    <span>This is a Warning Alert.</span>
</div>
<!-- Error -->
<div role="alert" class="alert alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <span>This is a Error Alert.</span>
</div>
<!-- Neutral -->
<div role="alert" class="alert alert-neutral">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
    <span>This is a Neutral Alert.</span>
</div>

Alarmrichtung

Horizontaler Alarm

html 
1
2
3
4
<div role="alert" class="alert alert-horizontal">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Horizontal direction alert.</span>
</div>

Vertikaler Alarm

html 
1
2
3
4
<div role="alert" class="alert alert-vertical">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Vertical direction alert.</span>
</div>

Alarmformen

Pillenalarm

html 
1
2
3
4
<div role="alert" class="alert alert-primary alert-pill">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Pill shape alert component.</span>
</div>

Abgerundeter Alarm

html 
1
2
3
4
<div role="alert" class="alert alert-success alert-rounded">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Rounded shape alert component.</span>
</div>

Warnungsstile

Weiche Warnungen

html 
 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
<div role="alert" class="alert alert-soft">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-soft">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-soft">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-soft">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-soft">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-soft">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-soft">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-soft">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-soft">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Übersichtswarnungen

html 
 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
<div role="alert" class="alert alert-outline">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-outline">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-outline">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-outline">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-outline">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-outline">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-outline">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-outline">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-outline">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Gestrichelte Warnungen

html 
 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
<div role="alert" class="alert alert-dashed">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-dashed">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-dashed">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-dashed">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-dashed">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-dashed">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-dashed">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-dashed">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-dashed">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Geisterwarnungen

html 
 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
<div role="alert" class="alert alert-ghost">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-ghost">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-ghost">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-ghost">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-ghost">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-ghost">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-ghost">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-ghost">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-ghost">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Alarmlayout und -verhalten

Warnungen in voller Breite

Verwenden Sie die Dienstprogrammklasse w-full, um eine Warnung über die gesamte Breite ihres Containers zu verteilen. Das funktioniert mit allen Farb- und Stilvarianten.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

html 
 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
<div role="alert" class="alert w-full">
    <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary w-full">
    <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary w-full">
    <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent w-full">
    <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info w-full">
    <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success w-full">
    <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning w-full">
    <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error w-full">
    <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral w-full">
    <span>Profile 80% complete. Add a photo to finish.</span>
</div>

Reaktionsfähiges Alarm-Stacking

Diese Warnung wird auf Mobilgeräten vertikal gestapelt und auf dem Desktop horizontal erweitert, um eine optimale Bildschirmnutzung zu gewährleisten.

html 
1
2
3
4
5
6
7
8
<div role="alert" class="alert alert-vertical sm:alert-horizontal">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <span>Add a profile photo to reach 100%.</span>
  <div class="space-x-1.5">
    <button class="btn btn-sm">Skip</button>
    <button class="btn btn-sm btn-primary">Upload</button>
  </div>
</div>

Alarmieren Sie mit Rich Content

html 
1
2
3
4
5
6
7
8
<div role="alert" class="alert alert-vertical sm:alert-horizontal w-full">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
  <div>
    <h3 class="font-bold">New Emails!</h3>
    <div class="text-xs">You have 4 unread emails</div>
  </div>
  <button class="btn btn-sm">View</button>
</div>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Alarm-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP