Links
Verschiedene Arten von Links erhalten automatisch ein Icon vor oder nach dem Linktext. Dies betrifft primär Links auf Dateien, E-Mail-Links, oder Links auf externe Websiten. Das Icon hilft dem Besucher schnell zu erkennen, was ihn bei einem Klick erwartet; also ob er beispielsweise die Glarus-Website verlässt, oder im Begriff ist eine Datei herunterzuladen.
Links, die einen der Glarus-Domains enhalten gelten als intern und bekommen kein Icon.
Link-Typen, die automatische ein Icon erhalten:
- PDF (.pdf)
- Word (.docx)
- Excel (.xlsx)
- Powerpoint (.pptx)
- ZIP-Datei (.zip)
- Text-Datei (.txt)
- E-Mail (mailto:)
- externer Link
Ausnahmen ohne Icon definieren
In bestimmten Situationen kann das Icon optisch stören, oder aus irgend einem anderen Grund unerwünscht sein. Solche Ausnahmen müssen entweder global festgelegt werden (via backslash), oder können dem Link mit einer zusätzlichen Formatvorlagenklasse .no-icon
definiert werden:
Links ohne Linie unten
Links im Inhaltsbereich sind üblicherweise mit einer grünen Linie unterstrichen. Soll diese explizit unterdrückt werden (Beispielsweise, wenn man Bilder verlinkt), so geschieht dies mit der Formatvorlagenklasse .no-border
.
Tipp
Formatvorlagenklassen können auch kombiniert werden, indem mehrere Klassen durch einen Wortabstand separiert aufgelistet werden no-border no-icon
:
Links als Buttons
Normale Links können in Ausnahmefällen auch das Aussehen von Buttons («Call to Action») annehmen, wie sie beispielsweise in Formularen beim «absenden» zu sehen sind.
Dies wird über die Formatvorlagenklasse .btn
erreicht:
Soll der Button über die gesamte Breite gehen, ist zusätzlich zur Button-Klasse .btn
die Formatvorlagenklasse .btn--fullwidth
zu ergänzen. Die Breite des Buttons definiert sich durch das umgebende Elternelement; beispielsweise einer Box.
Um Ihre auffallende Wirkung nicht zu verlieren, sollte nicht mehr als ein Button pro Seite verwendet werden. Auch sollten Sie bestehende Buttons auf einer Seite (beispielsweise von Formularen und Suchfiltern) nicht konkurrieren.