Hinweise machen die User auf Dinge aufmerksam, die sie beachten müssen. Häufig sind sie in Bestellformularen, wenn Angaben falsch sind (E-Mail-Adresse) oder fehlen.
Es gibt folgende Varianten: .alert-success (Bestätigung) .alert-info (Information) .alert-warning (Warnung) .alert-danger (Gefahr)
Accessibility
You can add a <span class="sr-only">alert type</span> if the role="alert" is not enough information for the end user.
Der Krisenbanner wird bei Ereignissen grosser Dringlichkeit auf der Startseite angezeigt. Er steht immer zuoberst auf der Startseite.
Es ist wichtig, dieses Element nur bei Notfällen - also sparsam - einzusetzen.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, placeat, recusandae, amet, modi hic accusamus cumque id nesciunt debitis nihil neque quaerat reprehenderit iste mollitia laborum natus culpa laboriosam labore.
<div class="alert alert--emergency clearfix" role="alert">
<div class="col-sm-3">
<h3>Lorem ipsum</h3>
</div>
<div class="col-sm-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, placeat, recusandae, amet, modi hic accusamus cumque id nesciunt debitis nihil neque quaerat reprehenderit iste mollitia laborum natus culpa laboriosam labore.
</p>
</div>
</div>
Die Kontaktbox bietet eine Kontaktmöglichkeit zu dem Inhalt der Seite an. Sie steht immer in der Kontextspalte an oberster Stelle. Steht für die gesamte Website nur ein allgemeiner Kontakt zur Verfügung, der auch über die Service-Navigation verfügbar ist, entfällt die Kontaktbox.
Die Kontaktbox weist zwei Reiter auf: "Kontakt" und "Karte". Unter dem Reiter "Kontakt" wird die Kontaktperson, Adresse, Telefonnummer, Kontaktformular usw. angezeigt. Bei Bedarf können weitere Informationen, wie z.B. Öffnungszeiten (z.B. einer Botschaft) aufgeführt werden. Unter dem Reiter "Karte" wird der Kontakt in einem Kartenausschnitt grafisch lokalisiert und die Adresse nochmals abgekürzt aufgeführt.
Durch Klicken auf den Link "Kontaktinformationen drucken" öffnet sich ein neues Browserfenster, welches die Kontaktdaten in einer für den Druck optimierten Darstellung anzeigt.
Auf Tablets wird der Kontakt unterhalb des Seiteninhalts in einem zweispaltigen Layout angezeigt. Die Inhalte der beiden Reiter werden nebeneinander angezeigt.
