Dies ist eine alte Version des Handbuchs und der Pattern Library (v1). Bitte wechseln Sie zur aktuellen Version (v2).

Hervorgehobener Link

Über das Pattern

Hervorgehobene Links heben sich von einfachen Links durch die Textformatierung, einen angestellten Pfeil und die Animation dessen hervor.

Geeignete Anwendung

Hervorgehobene Links eignen sich als Call-To-Action und für die Verlinkung zu Seiten, die weiterführende Information beinhalten.

Ungeeignete Anwendung

Hervorgehobene Links sollten nur als Call-To-Action am Ende von anderen Pattern wie Stages, Cards oder Sections verwendet werden und nicht innerhalb von Fließtext. Ausnahmen sind Infoboxen und Quicklinks.

Anwendungsrichtlinien

  • Generische Linktexte wie „Mehr erfahren“, „Weiterlesen“ oder „Hier klicken“ sollten vermieden werden.
  • Text sollte kurz gehalten und nicht zweizeilig dargestellt werden

Parameter und Anwendung in Nunjucks

# Parameter
url: "string" # URL oder Anker
block: "Boolean" # (default: false) nimmt volle Breite ein
attributes: "object" # HTML-Attribute (z. B.: class, etc.), frei wählbar
flip: "Boolean" # (default: false) Icon links und nicht rechts vom Text anzeigen

# Anwendung
{% from "components/hervorgehobener-link/hervorgehobener-link.njk" import emLink with context %}

{% call emLink(url='/seite.html') %}
Text frei wählbar
{% endcall %}

Variationen

In eigenem Fenster öffnen

In eigenem Fenster öffnen

In eigenem Fenster öffnen

In eigenem Fenster öffnen