KERN UX

KERN Design-System

brings the KERN UX Design System
— the shared design system for German public administration — to Drupal as a ready-to-use theme built entirely on Single Directory Components (SDC).

Install it, set it as the default theme, and your site renders
with accessible,
standards-compliant KERN UI out of the box: forms, buttons,
alerts, tables,
navigation and more, all themed to the official KERN
specification.

Features

• 40+ KERN components as native Drupal SDC (button, alert,
  card, table, accordion, tabs, form elements, header, footer,
  breadcrumb, …).
• Drupal form, system and views template overrides —
  usable KERN styling without manual theming.
• KERN "Kopfzeile" (official government header)
  integration.
• Local or CDN delivery of the KERN base CSS, switchable in the
  theme settings.
• Storybook-documented components for design-system review and
  development.
• Starter kit for generating your own KERN-based
  sub-theme.
• Canvas ready components as a subtheme.

Components included

All components ship as native Drupal SDC and are documented in
Storybook.

• Layout: Container, Row, Column, Section
  (Canvas), Divider
• Page & navigation: Header, Footer,
  Kopfzeile (government header), Navbar (Canvas), Link, Tabs
• Typography & content: Heading, Text,
  Icon, Image, Badge, Card
• Data display: Table, Description list (+
  item), Accordion (+ group), Tasklist (+ header/item), Summary (+
  group)
• Forms: Form element, Label, Input,
  Textfield, Textarea, Select, Checkbox (+ checkboxes), Radio (+
  radios), Date, File, Button, Submit
• Feedback & status: Alert, Dialog,
  Loader, Progress

Requirements

• Drupal 10.x or 11.x
• PHP 8.3+
• UI
  Icons (ui_icons_font)

Installation

composer require drupal/kern_ux
     drush theme:enable kern_ux
     drush config:set system.theme default kern_ux

Documentation & development

Build and local-development instructions (DDEV, asset build,
Storybook) are in the
README.md and BUILD.md in the
source repository.