Alert Boxes

Temporäre Alert Boxes mit Icon und Close-Btn

Success Alert
als Feedback zum erfolgreichen Hochladen, Downloaden, Verändern, .. des Interfaces/Daten durch den Nutzer.

Allgemeine Infobox
die temporäre Informationen darstellt, dies kann z.B. als Hilfestellung zum Ausfüllen von Form-Elementen dienen.

Warning Alert
Kann zur Information von wichtigeren, temporären Alerts verwendet werden.

Error Alert
Zur Darstellung von Fehlermeldungen.

Permanente Info Box ohne Close-Btn

Kontakt

Bei Fragen oder Anmerkungen steht Ihnen unser Team gerne zur Verfügung:

service@us.net

+49 (0123) 123456789

Info-Box in Blau.
Diese Box dient dazu permanente, allgemeine Informationen darzustellen.

Info-Box in Blau.
Diese Box dient dazu permanente Informationen darzustellen, sollte nach Möglichkeit nie eingesetzt werden.

Eine Alertbox in der Primary Color des Unternehmens.
Diese Box dient dazu permanente, unternehmensspezifische Informationen darzustellen.

Class Reference

CSS class	Erklärung
`alert-[inverse \| success \| warning \| danger \| info \| primary]`	grau \| grün \| orange \| rot \| blau \| primary
`content`	content

Source Code


<!-- Alert Boxes mit Close-BTN -->

<div class="alert alert-success" role="alert">
    <button type="button" class="btn close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="align-middle tx-18 glyphicons-basic-634-circle-check"></i>
    <span class="align-middle">
        Die Registrierung und Nutzung sind kostenlos. Bitte füllen Sie dazu nachstehendes Formular aus (mit * gekennzeichnete Felder sind Pflichtangaben). Ein Anspruch auf Zulassung zum Netzwerk besteht nicht.
    </span>  
</div><!-- alert -->


<!-- Generelle Info Box ohne Close-Btn -->

<div class="alert alert-inverse alert-solid" role="alert">
    <div class="d-sm-flex align-items-center justify-content-start">
        <i class="icon ion-ios-cloud-download-outline lh-3 tx-48"></i>
            <div class="">
                <h3 class="pd-b-5">Kontakt</h3>
                <p class="">
                    Bei Fragen oder Anmerkungen steht Ihnen unser Team gerne zur Verfügung:
                </p>
                <p><i class="align-middle tx-18 glyphicons-basic-11-envelope"></i>
                    service@us.net
                    <br>
                    <i class="align-middle tx-18 glyphicons-basic-169-mobile-phone-shaking"></i>
                        +49 (0123) 123456789
                </p>
            </div>
    </div><!-- d-flex -->
</div>