Direkt zum Inhalt springen

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 Badener-Website verlässt, oder im Begriff ist eine Datei herunterzuladen.

Links, die den URL .tg.ch enthalten bekommen kein Icon.

 Link-Typen, die automatische ein Icon erhalten:

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:

externer Link ohne Icon

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 .

Link ohne Linie unten

Tipp

Formatvorlagenklassen können auch kombiniert werden, indem mehrere Klassen durch einen Wortabstand separiert aufgelistet werden no-border no-icon :

externer Link ohne Icon und ohne Linie

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:

Bestellen

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.

Bestellen

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.