Komponenten

Die KERN Komponenten wurden gezielt entwickelt, um Online-Dienste der deutschen Verwaltung optimal umzusetzen. Ziel ist es, diese Lösungen auf nahezu allen Geräten und in allen gängigen Browsern verfügbar zu machen – und das möglichst ohne umfangreichen Einsatz von JavaScript.

Daher wird konsequent auf native HTML5-Komponenten gesetzt, was sich auch im Namen des npm-Packages (kern-ux/native) widerspiegelt. Durch den weitgehenden Verzicht auf JavaScript werden technische Abhängigkeiten minimiert und ein hohes Maß an Stabilität und Performance gewährleistet. Ein weiterer Vorteil ist ein hohes Niveau an Barrierefreiheit, da native Technologien von Haus aus viele Anforderungen daran erfüllen.

Mit diesem Ansatz wird sichergestellt, dass digitale Verwaltungsangebote für alle Nutzenden zugänglich sind – unabhängig von technischen Voraussetzungen oder individuellen Einschränkungen.

• Anleitung für Entwickler:innen, wie man KERN einbindet
• Anleitung für Designer:innen, wie man mit KERn arbeitet

• Accordion

  Fasst Informationen in Überschriften zusammen und ermöglicht das Ein- und Ausblenden der zugehörigen Inhalte.

• Alert

  Gibt einen Hinweis zu einer wichtigen Information mit knapper Erläuterung und optionalem Link.

• Badge

  Gibt einen knappen Status-Hinweis zu einem übergeordneten Element.

• Button

  Löst eine Aktion aus, seine Beschriftung benennt diese Aktion.

• Card

  Zeigt zusammengehörige Inhalte kompakt in einem visuell abgegrenzten Bereich, oft mit Titel, Bild und Aktionen.

• Description List

  Strukturiert die Darstellung von Begriffen und deren Definitionen.

• Dialog

  Vermitteln Informationen und fordern eine Reaktion von Nutzenden.

• Divider

  Unterteilt Inhaltsblöcke visuell in verschiedene Gruppen und kann eine Hierarchie aufbauen.

• Fieldset

  Gruppiert zusammengehörige Formularfelder und kann eine Hierarchie aufbauen.

• Form Inputs

  Ermöglichen es den Nutzenden, Daten in das System einzugeben.

• Input Checkboxes

  Dient der Auswahl einer oder mehrerer Optionen.

• Input Date

  Unterstützt Nutzende bei der Eingabe eines Datums.

• Input E-Mail

  Unterstützt Nutzende bei der Eingabe einer E-Mail-Adresse.

• Input File

  Ermöglicht das Hochladen einer oder mehrerer Dateien.

• Input Number

  Unterstützt Nutzende bei der Eingabe einer Zahl.

• Input Password

  Ermöglicht die Eingabe oder Erstellung eines Passworts.

• Input Radios

  Dienen der Auswahl nur einer Option aus sich gegenseitig ausschließenden Optionen.

• Input Select

  Bietet die Möglichkeit zur Auswahl einer Option aus einer ausklappbaren Liste von Optionen.

• Input Tel

  Unterstützt Nutzende bei der Eingabe einer Telefonnummer.

• Input Text

  Ermöglicht Nutzenden, Buchstaben, Zahlen und Sonderzeichen einzugeben.

• Input Textarea

  Ermöglicht eine Eingabe von langen Textinhalten durch Nutzende.

• Input URL

  Unterstützt Nutzende bei der Eingabe einer einer Internetadresse (URL).

• Grid

  Ermöglicht strukturierte Layouts durch Aufteilung in Zeilen und Spalten.

• Icon

  Visualisieren Aktionen, Inhalte oder Statusinformationen.

• Kopfzeile

  Kennzeichnet digitale Auftritte der öffentlichen Verwaltung, wie Behörden, Online-Dienste oder Serviceportale.

• Link

  Ist eine direkte Verbindung zu anderen Inhalten.

• Loader

  Ist ein animiertes, sich drehendes Symbol, das die Nutzenden darauf hinweist, dass ein Inhalt geladen wird.

• Progress

  Zeigt die Gesamtdauer und den Fortschritt eines mehrstufigen Prozesses an.

• Summary

  Fasst zuvor eingegebene Informationen zusammen und ermöglicht deren Bearbeitung.

• Table

  Stellt Daten tabellarisch dar für schnellen Vergleich und Überblick.

• Tabs

  Ermöglicht das strukturierte Anzeigen und Wechseln zwischen Inhaltselementen.

• Tasklist

  Listet Aufgaben auf und zeigt deren Bearbeitungsstatus.

• Text Heading

  Ist eine Überschrift für Seiten und Abschnitte.

• Text Title

  Dient als Titel innerhalb von Komponenten.

• Text Preline

  Ergänzt Title oder Heading mit unterstützenden Informationen.

• Text Subline

  Ergänzt Title oder Heading mit unterstützenden Informationen.

• Text Label

  Beschriftet Eingabefelder, Buttons oder andere interaktive Elemente.

• Text Body

  Wird für Fließtext, Hilfetexte und inhaltliche Absätze verwendet.