Inhalt / Links
Links in FWT
Links führen Nutzer zu weiteren Inhalten, Downloads, Kontakten, externen Webseiten oder wichtigen Aktionen. Sie müssen sichtbar, verständlich und gut bedienbar sein.
FWT behandelt Links deshalb nicht nur als einfachen Textlink, sondern bietet zusätzliche Linkmuster für typische Einsatzbereiche.
Textlinks
Normale und dezente Textlinks
Textlinks stehen direkt im Fließtext. Sie müssen erkennbar bleiben, ohne den gesamten Absatz unruhig zu machen.
Dies ist ein normaler Textlink innerhalb eines Absatzes.
Dies ist ein dezenter sekundärer Link.
Dies ist ein starker wichtiger Link.
HTML-Code anzeigen
<p class="fwt-text">
Dies ist ein normaler
<a class="fwt-link" href="#">Textlink</a>
innerhalb eines Absatzes.
</p>
<p class="fwt-text">
Dies ist ein dezenter
<a class="fwt-link-soft" href="#">sekundärer Link</a>.
</p>
<p class="fwt-text">
Dies ist ein starker
<a class="fwt-link-strong" href="#">wichtiger Link</a>.
</p>Pfeil-Links
Pfeil-Links für Weiterleitungen
Pfeil-Links eignen sich für „Mehr erfahren“, „Weiterlesen“ oder klare Weiterführungen innerhalb einer Seite.
HTML-Code anzeigen
<p class="fwt-text">
<a class="fwt-link-arrow" href="#">
Mehr über FWT erfahren
</a>
</p>Extern
Externe Links kennzeichnen
Externe Links sollten erkennbar sein, besonders wenn sie eine neue Seite oder einen anderen Anbieter öffnen.
HTML-Code anzeigen
<p class="fwt-text">
<a class="fwt-link-external" href="https://chasalla.de" target="_blank" rel="noopener noreferrer">
Externe Webseite öffnen
</a>
</p>
<p class="fwt-text">
<a class="fwt-link-external fwt-link-external-muted" href="https://chasalla.de" target="_blank" rel="noopener noreferrer">
Dezenter externer Link
</a>
</p>target="_blank" sollte immer
rel="noopener noreferrer" ergänzt werden.
Download
Download-Links
Downloadlinks sollten klar sagen, was heruntergeladen wird. Noch besser sind später Angaben zu Dateityp und Dateigröße.
HTML-Code anzeigen
<p class="fwt-text">
<a class="fwt-link-download" href="#" download>
Beispiel-Datei herunterladen
</a>
</p>Kontakt
Kontaktlinks
Kontaktlinks helfen bei E-Mail, Telefon oder Webadressen. Sie sollten gut erkennbar und auf Mobilgeräten sinnvoll nutzbar sein.
HTML-Code anzeigen
<div class="fwt-grid fwt-grid-3">
<div class="fwt-frame">
<a class="fwt-link-contact fwt-link-mail" href="mailto:info@example.de">
info@example.de
</a>
</div>
<div class="fwt-frame">
<a class="fwt-link-contact fwt-link-phone" href="tel:+49561000000">
0561 / 000000
</a>
</div>
<div class="fwt-frame">
<a class="fwt-link-contact fwt-link-web" href="https://example.de" target="_blank" rel="noopener noreferrer">
example.de
</a>
</div>
</div>Linklisten
Linklisten
Linklisten eignen sich für weiterführende Seiten, Dokumentationsbereiche, Downloads, Quellen oder kleine Inhaltsverzeichnisse.
HTML-Code anzeigen
<ul class="fwt-link-list">
<li><a href="#">Dokumentation öffnen</a></li>
<li><a href="#">Beispiele ansehen</a></li>
<li><a href="#">Download vorbereiten</a></li>
</ul>
<ul class="fwt-link-list fwt-link-list-muted">
<li><a href="#">Dezenter Nebenlink</a></li>
<li><a href="#">Weitere Informationen</a></li>
</ul>Linkkarten
Linkkarten
Linkkarten sind nützlich, wenn ein Link mehr Erklärung braucht oder als sichtbarer Einstieg in einen größeren Bereich dienen soll.
HTML-Code anzeigen
<div class="fwt-grid fwt-grid-3">
<a class="fwt-link-card fwt-link-card-primary" href="#">
<h3 class="fwt-link-card-title">Dokumentation</h3>
<p class="fwt-link-card-text">
Grundlagen, Klassen und Beispiele ansehen.
</p>
</a>
<a class="fwt-link-card fwt-link-card-info" href="#">
<h3 class="fwt-link-card-title">Beispiele</h3>
<p class="fwt-link-card-text">
Fertige Muster und Bausteine prüfen.
</p>
</a>
<a class="fwt-link-card fwt-link-card-success" href="#">
<h3 class="fwt-link-card-title">Download</h3>
<p class="fwt-link-card-text">
FWT später als Paket bereitstellen.
</p>
</a>
</div>Hinweisboxen
Link-Hinweisboxen
Link-Hinweisboxen verbinden kurze Erklärung mit einer passenden Aktion. Sie eignen sich für Dokus, Downloads, weiterführende Seiten oder wichtige Hinweise.
Weitere Informationen
Diese Box eignet sich für wichtige weiterführende Links innerhalb einer Doku.
Vor dem Download prüfen
Verwende Downloadlinks nur, wenn klar ist, welche Datei geladen wird.
HTML-Code anzeigen
<div class="fwt-link-box fwt-link-box-info">
<h3 class="fwt-link-box-title">Weitere Informationen</h3>
<p class="fwt-link-box-text">
Diese Box eignet sich für wichtige weiterführende Links innerhalb einer Doku.
</p>
<p class="fwt-link-box-action">
<a class="fwt-link-arrow" href="#">
Zur passenden Seite wechseln
</a>
</p>
</div>
<div class="fwt-link-box fwt-link-box-warning">
<h3 class="fwt-link-box-title">Vor dem Download prüfen</h3>
<p class="fwt-link-box-text">
Verwende Downloadlinks nur, wenn klar ist, welche Datei geladen wird.
</p>
<p class="fwt-link-box-action">
<a class="fwt-link-download" href="#" download>
Beispiel herunterladen
</a>
</p>
</div>Barrierefreiheit
Links richtig verwenden
Sprechende Linktexte
Linktexte sollten beschreiben, wohin der Link führt.
<a href="/kontakt">Kontaktformular öffnen</a>
Nicht nur Farbe
Links müssen auch ohne Farbwahrnehmung erkennbar sein.
<a class="fwt-link" href="#">Sichtbarer Link</a>
Externe Ziele markieren
Externe Links können mit einem Symbol gekennzeichnet werden.
<a class="fwt-link-external" href="#">Externe Seite</a>
Download klar benennen
Nutzer sollten wissen, welche Datei geladen wird.
<a class="fwt-link-download" href="#">PDF herunterladen</a>
Fokus sichtbar halten
Tastaturnutzer müssen erkennen, welcher Link gerade aktiv ist.
:focus-visible
Keine falschen Links
Buttons sind für Aktionen, Links sind für Navigation oder Ziele.
<a href="/seite">Zur Seite</a>