KERN Komponenten

https://www.kern-ux.de/komponenten/
Admin
KERN Komponenten are native HTML5 components specifically developed for German public administration...
Tokens:103,539
Snippets:758
Trust Score:7.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### Disabled example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group in disabled state with a prefix (€) and suffix (pro Monat). The input is disabled and has a fixed value. Note: avoid using disabled as it limits accessibility.

```HTML
<div class="kern-form-input">
    <label class="kern-label" for="group-disabled-text">Wie hoch ist die Miete, in Euro pro Monat?</label>
    <div class="kern-input-group">
      <span class="kern-input-group-text kern-input-group-text--disabled" aria-hidden="true">€</span>
      <input class="kern-form-input__input" id="group-disabled-text" name="group-disabled-text" type="text" inputmode="numeric" disabled value="850" />
      <span class="kern-input-group-text kern-input-group-text--disabled" aria-hidden="true">pro Monat</span>
    </div>
  </div>
```

--------------------------------

### Aspect Ratio Example: Square, Video, and Auto Classes

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Demonstrates .kern-aspect-square (1:1), .kern-aspect-video (16:9), and .kern-aspect-auto classes within a grid layout. These classes force elements to maintain the specified aspect ratio.

```html
<div class="kern-grid kern-grid-cols-3 kern-gap-md">
  <div class="kern-aspect-square">Square (1:1)</div>    
  <div class="kern-aspect-video">Video (16:9)</div>
  <div class="kern-aspect-auto">Auto</div>
</div>
```

--------------------------------

### Readonly example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group in readonly state with a prefix (€) and suffix (pro Monat). The input has a fixed value and is not editable.

```HTML
<div class="kern-form-input">
    <label class="kern-label" for="group-readonly-text">Wie hoch ist die Miete, in Euro pro Monat?</label>
    <div class="kern-input-group">
      <span class="kern-input-group-text kern-input-group-text--readonly" aria-hidden="true">€</span>
      <input class="kern-form-input__input" id="group-readonly-text" name="group-readonly-text" type="text" inputmode="numeric" readonly value="850" />
      <span class="kern-input-group-text kern-input-group-text--readonly" aria-hidden="true">pro Monat</span>
    </div>
  </div>
```

--------------------------------

### Visibility and Display Example: Screen Reader Only and Responsive Hidden Classes

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Shows usage of .kern-sr-only, .kern-block, .kern-hidden-md, and .kern-sr-only-mobile classes. .kern-sr-only makes content visible only to screen readers, .kern-hidden-md hides on medium screens and up, and .kern-sr-only-mobile hides on mobile (≤767px) but shows on desktop.

```html
<div>
  <!-- Nur für Screenreader -->
  <span class="kern-sr-only">Wichtige Info für seheingeschränkte Personen</span>

  <!-- Visuelle Demo -->
  <div class="kern-block">
    Immer sichtbar
  </div>
  
  <div class="kern-hidden-md">
    Sichtbar auf Mobile, versteckt ab MD.
  </div>

  <div class="kern-sr-only-mobile">
      Versteckt auf Mobile (sr-only) sichtbar auf Desktop.
  </div>
</div>
```

--------------------------------

### Text-Präfix und -Suffix example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group with both a prefix (https://) and a suffix (.de) for a URL field. Includes a hint text and uses autocomplete="url".

```HTML
<div class="kern-form-input">
    <label class="kern-label" for="group-prefix-suffix-text">Internetadresse (URL)</label>
    <div class="kern-hint" id="group-prefix-suffix-text-hint">Tragen Sie nur den Domainnamen ohne https:// und ohne Endung .de ein.</div>
    <div class="kern-input-group">
      <span class="kern-input-group-text" aria-hidden="true">https://</span>
      <input class="kern-form-input__input" id="group-prefix-suffix-text" name="group-prefix-suffix-text" type="text" autocomplete="url" aria-describedby="group-prefix-suffix-text-hint" />
      <span class="kern-input-group-text" aria-hidden="true">.de</span>
    </div>
  </div>
```

--------------------------------

### Positionierung mit Starts & Ends (kern-col-start, kern-col-end)

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Zeigt die Verwendung von kern-col-start und kern-col-end zur expliziten Positionierung von Elementen im Grid. Das erste Element beginnt an Linie 2, das zweite beginnt an Linie 5 und endet an der letzten Linie.

```HTML
<div class="kern-grid kern-grid-cols-6 kern-gap-sm">
    <div class="kern-col-2 kern-col-start-2">.kern-col-start-2</div>
    <div class="kern-col-start-5 kern-col-end-1">.kern-col-start-5</div>
</div>
```

--------------------------------

### Hinweistext und Fehlermeldung example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group with an error state, including a hint text and an error message. The input has aria-invalid="true" and the error message is linked via aria-describedby.

```HTML
<div class="kern-form-input kern-form-input--error">
    <label class="kern-label" for="group-error-text">Wie hoch ist die Miete, in Euro pro Monat?</label>
    <div class="kern-input-group">
      <span class="kern-input-group-text" aria-hidden="true">€</span>
      <input class="kern-form-input__input kern-form-input__input--error" id="group-error-text" name="group-error-text" type="text" inputmode="numeric" aria-invalid="true" aria-describedby="group-error-message" />
      <span class="kern-input-group-text" aria-hidden="true">pro Monat</span>
    </div>
    <p class="kern-error" id="group-error-message">
      <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
      <span class="kern-body">Die Miete muss größer als 0 sein</span>
    </p>
  </div>
```

--------------------------------

### Readonly tel input example

Source: https://www.kern-ux.de/komponenten/form-inputs/tel

Readonly telephone input with a preset value and `readonly` attribute.

```HTML
<div class="kern-form-input">
  <label class="kern-label" for="tel3">Telefonnummer</label>
  <input class="kern-form-input__input" id="tel3" name="tel3" type="tel" value="+49 0132 1234567" readonly>
</div>
```

--------------------------------

### Responsive Gap-Klassen Beispiel (Grid-Layout)

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

HTML-Beispiel für die Verwendung responsiver Gap-Klassen (.kern-gap-xxs-sm, .kern-gap-xl-md, .kern-gap-xs-xl, .kern-gap-xl-xxl) auf einem Grid-Container. Die Klassen setzen unterschiedliche gap-Werte für verschiedene Breakpoints.

```html
<div class="kern-grid kern-grid-cols-2 kern-grid-rows-2 kern-gap-md kern-gap-xxs-sm kern-gap-xl-md kern-gap-xs-xl kern-gap-xl-xxl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

--------------------------------

### Optional tel input example

Source: https://www.kern-ux.de/komponenten/form-inputs/tel

Optional telephone input with an optional label span and `autocomplete="tel"`.

```HTML
<div class="kern-form-input">
  <label class="kern-label" for="tel">Telefonnummer <span class="kern-label__optional">- Optional</span></label>
  <input class="kern-form-input__input" id="tel" name="tel" type="tel" autocomplete="tel">
</div>
```

--------------------------------

### Responsive Stack: kern-stack-none-md und kern-stack-xs kern-stack-xl-lg

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Zeigt zwei responsive Stack-Konfigurationen: ohne Abstand ab md und wechselnd von xs zu xl ab lg.

```HTML
<div class="kern-stack kern-stack-none-md">
<p class="kern-body">kern-stack kern-stack-none-md</p>
<p class="kern-body">kern-stack kern-stack-none-md</p> 
<p class="kern-body">kern-stack kern-stack-none-md</p>
</div>

<div class="kern-stack kern-stack-xs kern-stack-xl-lg">
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p>
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p> 
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p> 
</div>
```

--------------------------------

### Accordion Group HTML

Source: https://www.kern-ux.de/komponenten/accordion

A group of accordions wrapped in a div with class kern-accordion-group. Each accordion follows the same structure as the single example.

```HTML
<div class="kern-accordion-group">
<details class="kern-accordion">
  <summary class="kern-accordion__header">
    <span class="kern-title">Welche Voraussetzungen muss ich erfüllen?</span>
  </summary>
  <section class="kern-accordion__body">
    <p class="kern-body">Zur Nutzung dieses Dienstes benötigen Sie ein einfaches Servicekonto.</p>
  </section>
</details>

<details class="kern-accordion">
<summary class="kern-accordion__header">
	<span class="kern-title">Wie hoch sind die Kosten?</span>
</summary>
<section class="kern-accordion__body">
	<p class="kern-body">
		Die Online-Anmeldung kostet 31 Euro (ab 2024). Damit sparen Sie gegenüber der klassischen Anmeldung im Bezirksamt
		erheblich.
	</p>
</section>
</details>

<details class="kern-accordion">
  <summary class="kern-accordion__header">
    <span class="kern-title">Wie lange dauert der Prozess?</span>
  </summary>
  <section class="kern-accordion__body">
    <p class="kern-body">Etwa 10 Minuten.</p>
  </section>
</details>
</div>
```

--------------------------------

### Disabled tel input example

Source: https://www.kern-ux.de/komponenten/form-inputs/tel

Disabled telephone input with `disabled` attribute. The docs warn against using `disabled` as it limits accessibility.

```HTML
<div class="kern-form-input">
  <label class="kern-label" for="tel4">Telefonnummer</label>
  <input class="kern-form-input__input" id="tel4" name="tel4" type="tel" value="+49 0132 1234567" disabled>
</div>
```

--------------------------------

### Webkomponente mit explizitem Theme

Source: https://www.kern-ux.de/komponenten/kopfzeile

Explizites Setzen des Themes auf `dark`. Standardmäßig wird das Theme über die Systemeinstellung (`prefers-color-scheme`) ermittelt.

```HTML
<kern-kopfzeile theme="dark"></kern-kopfzeile>
```

--------------------------------

### Hint and error tel input example

Source: https://www.kern-ux.de/komponenten/form-inputs/tel

Telephone input with hint text and an error message. Uses `aria-invalid` and `aria-describedby` to associate the hint and error.

```HTML
<div class="kern-form-input kern-form-input--error">
  <label class="kern-label" for="tel6">Telefonnummer</label>
  <div class="kern-hint" id="tel-hint2">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
  <input class="kern-form-input__input kern-form-input__input--error" id="tel6" name="tel6" type="tel" autocomplete="tel" aria-invalid="true" aria-describedby="tel-hint2 tel-error">
  <p class="kern-error" id="tel-error">
    <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
    <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
  </p>
</div>
```

--------------------------------

### Default tel input example

Source: https://www.kern-ux.de/komponenten/form-inputs/tel

Standard telephone number input field with `type="tel"` and `autocomplete="tel"`.

```HTML
<div class="kern-form-input">
  <label class="kern-label" for="tel">Telefonnummer</label>
  <input class="kern-form-input__input" id="tel" name="tel" type="tel" autocomplete="tel">
</div>
```

--------------------------------

### Grid Wrapping mit 12 Spalten (kern-grid-cols-12)

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Zeigt, wie Grid-Items automatisch umbrechen, wenn mehr als 12 Spalten belegt werden. Hier belegen 4 Items à 6 Spalten insgesamt 24 Spalten, was 2 Zeilen ergibt.

```HTML
<div class="kern-grid kern-grid-cols-12 kern-gap-sm">
    <!-- 4 Items à 6 Spalten = 24 Spalten = 2 Zeilen -->
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
</div>
```

--------------------------------

### Button-Suffix example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group with a button suffix for a password field. The button toggles password visibility and includes an icon and screen-reader-only label.

```HTML
<div class="kern-form-input">
<label class="kern-label" for="group-with-icon-text">Passwort</label>
<div class="kern-input-group">
  <input class="kern-form-input__input" id="group-with-icon-text" name="group-with-icon-text" type="password" autocomplete="current-password" />
  <button class="kern-btn kern-btn--secondary" type="button" aria-pressed="false">
    <span class="kern-icon kern-icon--visibility-off" aria-hidden="true"></span>
    <span class="kern-label kern-sr-only">Passwort anzeigen</span>
  </button>
</div>
</div>
```

--------------------------------

### Responsive Grid mit Suffixen (kern-col-12, kern-col-6-sm, kern-col-4-md)

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Zeigt ein responsives Grid, das auf Mobile 2 Spalten und ab dem md-Breakpoint 4 Spalten verwendet. Die Klassen kern-col-12, kern-col-6-sm und kern-col-4-md werden auf jedem Item angewendet.

```HTML
<div class="kern-grid kern-gap-sm">
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
</div>
```

--------------------------------

### Text-Suffix example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group with a text suffix (m²) for a floor area field. Uses inputmode="numeric" for numeric input.

```HTML
<div class="kern-form-input">
    <label class="kern-label" for="group-suffix-text">Wohnfläche in Quadratmetern</label>
    <div class="kern-input-group">
      <input class="kern-form-input__input" id="group-suffix-text" name="group-suffix-text" type="text" inputmode="numeric" />
      <span class="kern-input-group-text" aria-hidden="true">m²</span>
    </div>
  </div>
```

--------------------------------

### Grid mit 3 Spalten und responsivem Gap

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

Definiert ein Grid mit 3 Spalten und kleinem Abstand, der ab `md` größer wird. Verwendet `kern-grid`, `kern-grid-cols-3`, `kern-gap-sm` und `kern-gap-xl-md`.

```HTML
<!-- Grid mit 3 Spalten und kleinem Abstand, größer ab md -->
<div class="kern-grid kern-grid-cols-3 kern-gap-sm kern-gap-xl-md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

--------------------------------

### Text-Präfix example

Source: https://www.kern-ux.de/komponenten/form-inputs/input-group

Shows an input group with a text prefix (+49) for a phone number field. Includes a hint text and uses autocomplete="tel-national".

```HTML
<div class="kern-form-input">
    <label class="kern-label" for="group-text">Telefonnummer</label>
    <div class="kern-hint" id="group-text-hint">Geben Sie Ihre Telefonnummer ohne die führende 0 oder +49 ein.</div>
    <div class="kern-input-group">
      <span class="kern-input-group-text" aria-hidden="true">+49</span>
      <input class="kern-form-input__input" id="group-text" name="group-text" type="tel" autocomplete="tel-national" aria-describedby="group-text-hint" />
    </div>
  </div>
```

--------------------------------

### Gap-Klassen Beispiele (Flex-Layout)

Source: https://www.kern-ux.de/komponenten/layout/hilfsklassen

HTML-Beispiele für die Anwendung der KERN-Gap-Klassen (.kern-gap-*) auf Flex-Container. Jedes Beispiel zeigt einen anderen Space-Wert (none, xxs, xs, sm, md, lg, xl) und demonstriert den resultierenden Abstand zwischen den Elementen.

```html
<p class="kern-body">Beispiel: None (Default)</p>  
<div class="kern-flex">
  <div>1</div>
  <div>3</div>
  <div>2</div>
</div>

<p class="kern-body">Beispiel: 2x-small</p>  
<div class="kern-flex kern-gap-xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: x-small</p>  
<div class="kern-flex kern-gap-xs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: small</p>  
<div class="kern-flex kern-gap-sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: Default</p>  
<div class="kern-flex kern-gap-md">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: Large</p>  
<div class="kern-flex kern-gap-lg">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: X-Large</p>  
<div class="kern-flex kern-gap-xl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```
Tokens:
Raw