Call Us Now. +00 (111) 999 00

About tctech

Explain to you how all this mistaken denouncing pleasure and praising pain was born and we will give you a complete simply free text account of the system, and expound the actual teachings.
  • Data Analysis
  • Product Development
  • Digital Marketing
  • Security System

Element System

Alerts

Alle Alert-Varianten — Standard, mit Icon, dismissible, Dark Mode.

Standard Icon Links Icon Rechts Dismissible Mit Inhalt Dark Mode

1 — Standard Alerts (alle Theme-Colors)

<div class="alert alert-primary" role="alert">
    <strong>Primary:</strong> Hinweistext hier.
    <a href="#" class="alert-link">Link</a>
</div>

<div class="alert alert-success" role="alert">Erfolgreich gespeichert.</div>
<div class="alert alert-danger"  role="alert">Fehler aufgetreten.</div>
<div class="alert alert-warning" role="alert">Bitte überprüfen.</div>
<div class="alert alert-info"    role="alert">Information.</div>

2 — Icon Links (.alert-icon-start)

<div class="alert alert-success alert-icon-start" role="alert">
    <div class="alert-icon bg-success text-dark">
        <i class="ph ph-check-circle"></i>
    </div>
    <strong>Erfolgreich!</strong><br>
    Die Aktion wurde abgeschlossen.
</div>

<!-- Icon-Farbe passend zur Alert-Farbe wählen -->
<!-- bg-primary text-dark   (Neongelb → dunkler Text) -->
<!-- bg-success text-dark   (Grün → dunkler Text)     -->
<!-- bg-danger  text-white  (Rot → weißer Text)        -->
<!-- bg-warning text-dark   (Gelb → dunkler Text)     -->
<!-- bg-info    text-white  (Blau → weißer Text)       -->

3 — Icon Rechts (.alert-icon-end)

<div class="alert alert-primary alert-icon-end" role="alert">
    <div class="alert-icon bg-primary text-dark">
        <i class="ph ph-arrow-right"></i>
    </div>
    Hinweistext links, Icon rechts.
</div>

4 — Dismissible (schließbar)

<!-- Dismissible: .alert-dismissible + fade + show + btn-close -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
    Dieser Alert kann geschlossen werden.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
</div>

<!-- Dismissible + Icon kombiniert -->
<div class="alert alert-warning alert-icon-start alert-dismissible fade show" role="alert">
    <div class="alert-icon bg-warning text-dark">
        <i class="ph ph-warning"></i>
    </div>
    Warnung mit Icon und Close-Button.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
</div>

5 — Alerts mit mehr Inhalt

<!-- Alert mit Heading, Text und Link -->
<div class="alert alert-info" role="alert">
    <h5 class="alert-heading">Gut zu wissen!</h5>
    <p>Längerer Erklärungstext hier.</p>
    <hr>
    <p class="mb-0"><a href="#" class="alert-link">Link</a></p>
</div>

<!-- Alert mit Fehlerliste -->
<div class="alert alert-danger" role="alert">
    <h5 class="alert-heading">Fehler</h5>
    <ul class="mb-0">
        <li>Fehler 1</li>
        <li>Fehler 2</li>
    </ul>
</div>

6 — Dark Mode

Dark Mode wird automatisch aktiviert via data-color-theme="dark" — kein extra CSS nötig. 

<!-- Dark Mode: data-color-theme="dark" auf den Container -->
<div data-color-theme="dark">
    <div class="alert alert-primary" role="alert">...</div>
    <div class="alert alert-success" role="alert">...</div>
</div>

<!-- Oder auf die Section selbst -->
<section class="scene bg-dark" data-color-theme="dark">
    ...
</section>

alerts.php — Element System v1