Komponenten

Link

Inhalte nahtlos verbinden.

Mit der Komponente Link können Sie vollständig anpassbare Hyperlinks erstellen, sowohl intern als auch extern, mit konsistentem Verhalten, Themesteuerung und zugänglichen Erweiterungen. Ganz gleich, ob Sie auf eine andere Seite, eine externe Ressource, ein herunterladbares Asset oder eine Telefonnummer verlinken, diese Komponente sorgt dafür, dass jeder Klick das richtige Nutzererlebnis bietet.

Sie wird um einen beliebigen Inhaltsblock Ihrer Wahl gewickelt und eignet sich perfekt für CTAs, Menüs, Bildlinks und Rich-Text-Interaktionen und bietet vollständige Flexibilität mit integrierter Barrierefreiheit, Thematisierung und aktivem Status-Styling.

Navigieren Sie wie Sie wollen

  1. Interne und externe Zielvorgaben.
    Alles in einer einheitlichen Schnittstelle.

  2. Beliebiger Inhalt im Content.
    Strukturieren Sie Ihre Links, wie benötigt

  3. Setzen Sie Link-Titel und ARIA-Bezeichnungen.
    Verbessern Sie UX und Barrierefreiheit.

Smartes Styling & Zustände

  1. Benutzerdefinierte Themes.
    Integrieren Sie Links nahtlos in Ihr Design.

  2. Aktuelle Seiten in Menüs hervorheben.
    Machen Sie die Navigation kristallklar.

  3. Unterscheidung zu exakten Links.
    Feinabgestimmte Navigationssteuerung.

Anwendungsfälle

Die Komponente Link kann in einer Vielzahl von Szenarien eingesetzt werden:

  • CTA-Schaltflächen oder Textlinks innerhalb von Inhalten

  • Navigationselemente und Menüs

  • Verlinkung von Medien wie Icons, Bilder oder Karten

  • Externe Weiterleitungen zu Partner- oder sozialen Websites

  • Deep-Linking zwischen Sprachversionen von Seiten

  • E-Mail (mailto:), Telefon (tel:), oder Asset-Downloads

Die wahre Stärke liegt in der Kombination flexibler Ziele mit jedem beliebigen Layout oder Inhalt, den Sie darin unterbringen möchten.

Konfigurationsoptionen und Funktionen

Die Link-Komponente ist Ihr flexibles Verbindungselement, egal ob Sie eine intuitive Navigation oder elegante Call-to-Actions erstellen möchten.

Mit responsivem Theming, intelligenten aktiven Zuständen und barrierefreiem Design ist jeder Link, den Sie mit Vertex Forge erstellen, leistungsstark, ausgefeilt und einsatzbereit.

Jeder Inhalt. Überall verlinken. Volle Accessibiity.

Pfad

Legt das eigentliche Ziel des Links fest.

Kann sein:

  • Ein interner Seitenverweis (z. B. about)

  • Eine externe URL (z. B. https://example.com)

  • Ein Medienelement

  • Eine E-Mail (mailto:)

  • Eine Telefonnummer (tel:)

Content Bereich

Umhüllen Sie alle Inhaltskomponenten innerhalb des Links, so dass sich die Komponente für minimale Links oder Rich-Media-Interaktionen eignet.

Beispiele:

  • Text

  • Schaltflächen

  • Icons

  • Cards oder Container

Titel

Optionales Hover-Titel-Attribut.

Wird als Tooltip angezeigt, wenn der Benutzer den Mauszeiger über den Link bewegt.

Hilfreich bei der Angabe von zusätzlichem Kontext oder zur Erläuterung externer Ziele.

Aria Label

Optionale Kennzeichnung für bessere Accessibility.

Bietet Screen-Readern und Suchmaschinen Informationen darüber, wohin der Link führt.

Diese Erweiterung verbessert die Benutzerfreundlichkeit für alle Benutzer und gewährleistet die Einhaltung der WCAG-Standards.

Komponenten Theme

Wenden Sie ein Design-Theme auf das gesamte Link-Element an.

Nützlich für die Einstellung:

  • Farben

  • Schriftarten

  • Unterstreichungen oder Hover-Effekte

  • Abständen und vielen mehr.

Aktives Element Theme

Wendet ein Theme an, wenn der Link einem Teil der aktuellen Route entspricht.

Ideal für Menüs oder Breadcrumb-Pfade, die zeigen, welcher Abschnitt gerade aktiv ist.

Exakt-Aktives Element Theme

Wendet ein Theme nur an, wenn der Link genau mit der aktuellen Route übereinstimmt.

Ideal für präzise Navigations-Szenarien, wie z. B. Hervorhebungen in der Seitenleiste oder Registerkarten.