Link

Links werden verwendet, um zu anderen Seiten, Bereichen oder externen Ressourcen zu navigieren.
Für Aktionen innerhalb der Oberfläche sollte stattdessen die Button-Komponente verwendet werden.

Beispiele

Basic

Standard-Link innerhalb von DK97 UI.

Beispiel-Link


<a class="a-link" href="#">
    Beispiel-Link
</a>

Plain

Plain Links können verwendet werden, wenn ein Link weniger stark hervorgehoben werden soll.

Plain Link


<a class="a-link -plain" href="#">
    Plain Link
</a>

External

Externe Links sollten bei neuer Registerkarte zusätzlich rel="noopener noreferrer" verwenden.

Externer Link


<a
    class="a-link"
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer">
    Externer Link
</a>

In Lists

Links können innerhalb von Listen verwendet werden, zum Beispiel für Inhaltsverzeichnisse oder Navigationen.


<ul class="a-list">
    <li class="a-list__item">
        <a class="a-link" href="#">
            Buttons
        </a>
    </li>

    <li class="a-list__item">
        <a class="a-link" href="#">
            Icons
        </a>
    </li>
</ul>

Klassen

Klasse	Beschreibung
`.a-link`	Basis-Klasse für Links.
`.-plain`	Modifikator für eine reduzierte Link-Darstellung.

Hinweise

Links dienen zur Navigation zwischen Seiten, Bereichen oder externen Ressourcen. Für Aktionen innerhalb einer Oberfläche sollte die Button-Komponente verwendet werden.

Best Practices

Verwende aussagekräftige Linktexte. Der Linktext sollte beschreiben, wohin der Link führt.

Vermeide generische Linktexte wie Hier klicken oder Mehr. Solche Texte sind ohne Kontext schwer verständlich.

Accessibility

Linktexte sollten das Ziel eindeutig beschreiben. Screenreader-Nutzer sollten das Linkziel verstehen können, ohne den umgebenden Text lesen zu müssen.