KERN-UX.Plain 2.8.2

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package KERN-UX.Plain --version 2.8.2
                    


                    

                
NuGet\Install-Package KERN-UX.Plain -Version 2.8.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="KERN-UX.Plain" Version="2.8.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="KERN-UX.Plain" Version="2.8.2" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="KERN-UX.Plain" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add KERN-UX.Plain --version 2.8.2
                    


                    

                
#r "nuget: KERN-UX.Plain, 2.8.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package KERN-UX.Plain@2.8.2
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=KERN-UX.Plain&version=2.8.2
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=KERN-UX.Plain&version=2.8.2
                    


                            Install as a Cake Tool

KERN Design System – Plain-CSS-HTML-Kit

npm version License: EUPL 1.2

Deutsch | English

Deutsch

Was ist KERN?

Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln. KERN ist ein Open-Source-Projekt, das von den Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle Informationen findest du auf www.kern-ux.de.

Dieses Repository enthält die Plain CSS/HTML-Referenzimplementation des KERN-Designsystems und ist auf npm unter dem Namen @kern-ux/native verfügbar.

English

What is KERN?

KERN is an open UX standard for the German public administration. It enables development teams to build accessible digital government services efficiently and with a user-centered focus. KERN is an open-source project initiated by the federal states of Hamburg and Schleswig-Holstein. Learn more at www.kern-ux.de.

This repository contains the plain CSS/HTML reference implementation of the KERN Design System, published on npm as @kern-ux/native.

🚀 Einbindung & Installation

Du kannst KERN auf drei verschiedene Arten in dein Projekt integrieren:

Methode 1: Einbindung über NPM (Empfohlen)

Füge @kern-ux/native zu deinen Projektabhängigkeiten hinzu:

npm install @kern-ux/native --save

Binde anschließend die CSS-Stylesheets und Schriftarten ein:

// JavaScript / TypeScript Bundler
import '@kern-ux/native/dist/kern.min.css';
import '@kern-ux/native/dist/fonts/fira-sans.css'; // Hauptschriftart (Fira Sans)
import '@kern-ux/native/dist/fonts/noto-sans.css'; // Optional (Noto Sans)

Oder in deiner Haupt-SCSS-Datei (mit Dart Sass / sass-embedded):

@use "@kern-ux/native/dist/kern.min.css";
@use "@kern-ux/native/dist/fonts/fira-sans.css";

Methode 2: Einbindung per CDN

Wenn du KERN ohne ein Buildtool/NPM verwenden möchtest, binde die CSS-Dateien direkt über ein CDN in deinen <head> ein:

  • Alternative A: jsdelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/kern.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/fonts/fira-sans.css" />

  • Alternative B: unpkg

    <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/kern.min.css" />
<link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/fonts/fira-sans.css" />

Methode 3: Kopieren der Bibliothek

Lade die neueste Version direkt als ZIP-Archiv von der Release-Seite des KERN-UX Repositories herunter. Entpacke die ZIP-Datei und binde die kompilierten CSS-Dateien oder die SCSS-Quelldateien direkt in dein Projekt ein.

🛠 Einbindung & Imports

JavaScript-Komponenten

Interaktive Komponenten (wie das Kopfzeilen-Menü) benötigen das mitgelieferte JavaScript zur Initialisierung:

import '@kern-ux/native/dist/js/kern-kopfzeile.js';

🧩 Komponenten-Beispiele

Hier sind einige grundlegende Komponenten-Markups mit BEM-Klassen (kern-*) und integrierten Barrierefreiheits-Attributen:

1. Buttons

<button type="button" class="kern-btn kern-btn--primary">
  <span class="kern-label">Primary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--secondary">
  <span class="kern-label">Secondary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--tertiary">
  <span class="kern-label">Tertiary Button</span>
</button>

2. Badges

<span class="kern-badge kern-badge--info">
  <span class="kern-label">Information</span>
</span>
<span class="kern-badge kern-badge--success">
  <span class="kern-label">Erfolg</span>
</span>
<span class="kern-badge kern-badge--warning">
  <span class="kern-label">Warnung</span>
</span>
<span class="kern-badge kern-badge--danger">
  <span class="kern-label">Fehler</span>
</span>

3. Description List (Beschreibungsliste)

<dl class="kern-description-list">
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Name</dt>
    <dd class="kern-description-list-item__value">Musterperson</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Vorname</dt>
    <dd class="kern-description-list-item__value">Kim</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">E-Mail</dt>
    <dd class="kern-description-list-item__value">kim@musterperson.de</dd>
  </div>
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">Adresse</dt>
    <dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
  </div>
</dl>

♿️ Barrierefreiheit

Barrierefreiheit ist der Kern unseres Design-Systems:

  • Farbkontraste erfüllen die WCAG 2.1 AA/AAA Richtlinien.
  • Semantisches HTML5 und korrekte WAI-ARIA-Rollen werden aktiv unterstützt.
  • Der Tastatur-Fokus ist in allen interaktiven Zuständen deutlich erkennbar.

💡 Wichtiger Hinweis für Entwickler:innen: Auf jeder einzelnen Komponentenseite auf kern-ux.de (wie z. B. auf der Button-Komponentenseite) findest du am Ende einen dedizierten Abschnitt zur Barrierefreiheit. Hier siehst du übersichtlich, was bereits geprüft wurde und worauf du bei der Einbindung in deiner Anwendung noch achten musst. Nutze dort die bereitgestellten Checklisten zur Absicherung.

💻 Lokale Entwicklung (für Mitwirkende)

Wenn du am Plain-Kit selbst mitwirken möchtest:

git clone https://gitlab.opencode.de/kern-ux/kern-ux-plain.git
cd kern-ux-plain
npm install
npm start # Startet die Storybook-Entwicklungsumgebung auf Port 6006

Verfügbare Befehle:

  • npm run build - Kompiliert SCSS/CSS und baut Storybook
  • npm run test:a11y - Führt automatisierte Barrierefreiheits-Tests aus
  • npm run test:visual - Führt visuelle Regressionstests via BackstopJS aus

🤝 Beitragen

Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, können im Issue-Tracker auf OpenCode gemeldet werden.

Bitte lies unsere Contributing Guidelines vor der Erstellung eines Merge Requests.

📄 Lizenz

Lizenziert unter der EUPL-1.2 (European Union Public Licence v. 1.2). Weitere Details findest du in der LICENSE.md Datei.

🔗 Nützliche Links

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

  • net8.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.8.2 91 9/23/2026
2.8.1 88 9/15/2026
2.8.0 102 9/8/2026
2.7.2 117 7/30/2026
2.7.1 108 7/15/2026
2.7.0 292 7/13/2026
2.6.4 112 6/24/2026
2.6.2 161 5/26/2026
2.6.1 111 5/20/2026
2.6.0 104 5/20/2026
2.5.0 128 3/16/2026
2.4.0 364 11/21/2025
2.3.2 552 9/25/2025
2.3.1 203 9/23/2025
2.3.0 183 7/31/2025
2.2.0 202 7/1/2025
2.1.2 189 6/6/2025