### HTML: Link List Example

Source: https://www.kern-ux.de/komponenten/text/list

Provides an example of a list composed of links, using 'kern-list' and 'kern-link' classes. Includes icons for interactive navigation elements.

```HTML
<ul class="kern-list">
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Ein weitere Link
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Dataport Homepage
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Link zu Dokumentation
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    More
  </a>
</li>
</ul>
```

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

### Table Default HTML Example

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

This example demonstrates the default implementation of the Table component using HTML. It includes a caption, table head, and table body with rows and cells, showcasing standard data presentation.

```html
<table class="kern-table">
<caption class="kern-title">Table default</caption>

<thead class="kern-table__head">
<tr class="kern-table__row">
	<th scope="col" class="kern-table__header">
		Dienstleistung
	</th>
	<th scope="col" class="kern-table__header">
		Gebühr 2025
	</th>
	<th scope="col" class="kern-table__header kern-table__header--numeric">
		Erhöhung
	</th>
</tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
  </tr>
</tbody>
</table>
```

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

### HTML: Numbered List Example

Source: https://www.kern-ux.de/komponenten/text/list

Demonstrates how to create a numbered list using the 'kern-list--number' class for ordered content presentation. This is useful for sequential information.

```HTML
<ol class="kern-list kern-list--number">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land.</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene.</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen.</li>
</ol>
```

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

### HTML: Small Link List Example

Source: https://www.kern-ux.de/komponenten/text/list

Demonstrates a compact link list using 'kern-list--small' and 'kern-link' classes, suitable for navigation where space is limited. Features icons for clarity.

```HTML
<ul class="kern-list kern-list--small">
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Ein weitere Link
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Dataport Homepage
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Link zu Dokumentation
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    More
  </a>
</li>
</ul>
```

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

### Table Small Variant HTML Example

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

This example showcases the 'small' variant of the Table component using HTML. It applies the 'kern-table--small' class to adjust the table's size, demonstrating a condensed data presentation.

```html
<table class="kern-table kern-table--small">
<caption class="kern-title">Table small</caption>

<thead class="kern-table__head">
<tr class="kern-table__row">
	<th scope="col" class="kern-table__header">
		Dienstleistung
	</th>
	<th scope="col" class="kern-table__header">
		Gebühr 2025
	</th>
	<th scope="col" class="kern-table__header kern-table__header--numeric">
		Erhöhung
	</th>
</tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
  </tr>
</tbody>
</table>
```

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

### Icon Variants by Size - HTML

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

This HTML snippet illustrates how to use different size variants for the Icon component. It shows examples for small ('kern-icon--small'), default (no size class), large ('kern-icon--large'), and extra-large ('kern-icon--x-large') icons, all using the 'home' icon as an example.

```html
<p>Icon small</p>
<span class="kern-icon kern-icon--home kern-icon--small"></span>
<p>Icon default</p>
<span class="kern-icon kern-icon--home"></span>
<p>Icon large</p>
<span class="kern-icon kern-icon--home kern-icon--large"></span>
<p>Icon x-large</p>
<span class="kern-icon kern-icon--home kern-icon--x-large"></span>
```

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

### Standard Table with Footer Example in HTML

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

Illustrates a standard HTML table enhanced with Kern-UX classes, including a footer section. This example is suitable for displaying data where a summary or aggregate row is beneficial. The structure includes a caption, header, body, and a footer row.

```html
<table class="kern-table">
<caption class="kern-title">Kino Besucherzahlen</caption>

<thead class="kern-table__head">
<tr class="kern-table__row">
	<th scope="col" class="kern-table__header">
		Dienstleistung
	</th>
	<th scope="col" class="kern-table__header">
		Gebühr 2025
	</th>
	<th scope="col" class="kern-table__header kern-table__header--numeric">
		Erhöhung
	</th>
</tr>
</thead>

<tbody class="kern-table__body">
<tr class="kern-table__row">
	<th scope="row" class="kern-table__header">
		Hausmüllentsorgung
	</th>
	<td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
	<td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
</tr>
<tr class="kern-table__row">
	<th scope="row" class="kern-table__header">
		Reinigung öffentlicher Wege
	</th>
	<td class="kern-table__cell">2,69 € pro m</td>
	<td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
</tr>
<tr class="kern-table__row">
	<th scope="row" class="kern-table__header">
		Schmutzwasserbeseitigung
	</th>
	<td class="kern-table__cell">2,41 € pro Kubikmeter</td>
	<td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
</tr>
<tr class="kern-table__row">
	<th scope="row" class="kern-table__header">
		Niederschlagswasserbeseitigung
	</th>
	<td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
	<td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
</tr>
</tbody>

<tfoot class="kern-table__footer">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Durchschnitt</th>
    <th scope="col" class="kern-table__header">-</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">4,6%</th>
  </tr>
</tfoot>
</table>
```

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

### HTML: Small Bulleted List Example

Source: https://www.kern-ux.de/komponenten/text/list

Shows how to create a small bulleted list using 'kern-list--bullet' and 'kern-list--small' classes for concise unordered content. Ideal for short, non-sequential items.

```HTML
<ul class="kern-list kern-list--bullet kern-list--small">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen</li>
</ul>
```

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

### HTML Input Number Examples

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

Beispiele für die Implementierung von Input Number in HTML, einschließlich Standard-, schreibgeschützter, deaktivierter, optionaler Felder sowie Felder mit Hinweistext und Fehlermeldungen.

```HTML
<div class="kern-form-input">
<label class="kern-label" for="plz">Postleitzahl</label>
<input class="kern-form-input__input" id="plz" name="plz" type="text" inputmode="numeric">
</div>
```

```HTML
<div class="kern-form-input">
<label class="kern-label" for="plz3">Postleitzahl</label>
<input class="kern-form-input__input" id="plz3" name="plz3" type="text" inputmode="numeric" value="20537" readonly>
</div>
```

```HTML
<div class="kern-form-input">
<label class="kern-label" for="plz4">Postleitzahl</label>
<input class="kern-form-input__input" id="plz4" name="plz4" type="text" inputmode="numeric" value="20537" disabled>
</div>
```

```HTML
<div class="kern-form-input">
<label class="kern-label" for="plz">Postleitzahl <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="plz" name="plz" type="text" inputmode="numeric">
</div>
```

```HTML
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="plz6">Postleitzahl</label>
<div class="kern-hint" id="plz-hint">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="plz6" name="plz6" type="text" inputmode="numeric" aria-describedby="plz-hint kern-input-error">
<p class="kern-error" id="input-error" role="alert">
  <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 Dialog Example (HTML)

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

This HTML code demonstrates a default dialog with a title, body content, and two action buttons (secondary and primary). It includes accessibility attributes and a close button.

```html
<dialog id="modal1" class="kern-dialog" aria-labelledby="modal1_heading" open>
<header class="kern-dialog__header">
  <h2 class="kern-title kern-title--large" id="modal1_heading">Frage?</h2>
  <button class="kern-btn kern-btn--tertiary">
    <span class="kern-icon kern-icon--close" aria-hidden="true"></span>
    <span class="kern-sr-only">Schließen</span>
  </button>
</header>
<section class="kern-dialog__body">
  <p class="kern-body">
   Die Beschreibung liefert mehr Kontext, z.&#8239;B. um vor kritischen Aktionen eine bewusste Bestätigung des Nutzenden zu erhalten.
  </p>
</section>
<footer class="kern-dialog__footer">
  <button class="kern-btn kern-btn--secondary">
    <span class="kern-label">Abbrechen</span>
  </button>
  <button id="confirmBtn" class="kern-btn kern-btn--primary">
    <span class="kern-label">Speichern</span>
  </button>
</footer>
<!-- only for displaying it properly on documentation page -->
 <style>#modal1 { position: relative}</style>
</dialog>
```

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

### HTML: Horizontal Link List Example

Source: https://www.kern-ux.de/komponenten/text/list

Presents a horizontal list of links using 'kern-list--horizontal' and 'kern-link' classes, ideal for navigation bars or compact menus. Includes interactive link styling.

```HTML
<ul class="kern-list kern-list--horizontal">
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Ein weitere Link
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Dataport Homepage
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Link zu Dokumentation
  </a>
</li>
<li>
  <a class="kern-link" href="#">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    More
  </a>
</li>
</ul>
```

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

### Accordion - Single Item HTML Example

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

Demonstrates a single Accordion component in HTML. It includes a header with a title and a body section for the content. This component is useful for presenting distinct pieces of information that can be revealed on demand.

```html
<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>
```

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

### Accordion - Initially Open State HTML Example

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

Illustrates an Accordion component in HTML that is initially open using the 'open' attribute. This is useful for highlighting specific content or ensuring that certain information is immediately visible to the user upon page load.

```html
<details class="kern-accordion" open>
<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>
```

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

### HTML Task List: Default Example

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

This HTML code demonstrates the default 'Task List' component, displaying tasks with numbers and their corresponding statuses (e.g., 'Erledigt', 'Unvollständig', 'Noch nicht zu bearbeiten'). It includes headers for task sections.

```html
<div class="kern-task-list">
<div class="kern-task-list__header">
  <h2 class="kern-heading-medium">Persönliche Daten</h2>
</div>

<ul class="kern-task-list__list">
<li class="kern-task-list__item">
	<span class="kern-number">1</span>
	<div class="kern-task-list__title" id="task1-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task1-status">
			Angaben zur Person machen
		</a>
		<div class="kern-task-list__status" id="task1-status">
			<span class="kern-badge kern-badge--success">
				<span class="kern-icon kern-icon--success kern-icon--sm" aria-hidden="true"></span>
				<span class="kern-label kern-label--small">Erledigt</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<span class="kern-number">2</span>
	<div class="kern-task-list__title" id="task2-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task2-status">
			Aktuelle Meldeadresse angeben
		</a>
		<div class="kern-task-list__status" id="task2-status">
			<span class="kern-badge kern-badge--warning">
				<span class="kern-label kern-label--small">Unvollständig</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<span class="kern-number">3</span>
	<div class="kern-task-list__title" id="task3-title">
		<p class="kern-body">Versandadresse meiner Briefwahlunterlagen angeben</p>
		<div class="kern-task-list__status" id="task3-status">
			<span class="kern-badge kern-badge--info">
				<span class="kern-label kern-label--small">Noch nicht zu bearbeiten</span>
			</span>
		</div>
	</div>
</li>
</ul>

<div class="kern-task-list__header">
<h2 class="kern-heading-medium">Zusammenfassung</h2>
</div>

<ul class="kern-task-list__list">
  <li class="kern-task-list__item">
  <span class="kern-number">4</span>
    <div class="kern-task-list__title">
      <p class="kern-body">Wenn Sie alle Angaben gemacht haben, können Sie diese hier noch einmal prüfen.</p>
      <div class="kern-task-list__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-label kern-label--small">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>
</div>
```

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

### Alert Variants with Description and Link (HTML)

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

Illustrates the Alert component with an optional body containing a description and a link, shown in info, success, warning, and danger states. This provides more context and actionable options.

```HTML
<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-title">Information</span>  
</div>
<div class="kern-alert__body">
  <p class="kern-body">Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.</p>
  <a href="#" class="kern-link">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Linktext
  </a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--success" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--success" aria-hidden="true"></span>
	<span class="kern-title">Erfolg</span>
</div>
<div class="kern-alert__body">
	<p class="kern-body">
		Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.
	</p>
	<a href="#" class="kern-link">
		<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
		Linktext
	</a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--warning" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
	<span class="kern-title">Warnung</span>
</div>
<div class="kern-alert__body">
	<p class="kern-body">
		Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.
	</p>
	<a href="#" class="kern-link">
		<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
		Linktext
	</a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--danger" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-title">Fehler</span>  
</div>
 <div class="kern-alert__body">
  <p class="kern-body">Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.</p>
  <a href="#" class="kern-link">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Linktext
  </a>
</div>
</div>
```

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

### Input Select with Hint and Error Message HTML

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

Demonstrates an input select with an associated hint text and an error message. This example includes ARIA attributes for accessibility.

```HTML
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="select5">Titel</label>
<div class="kern-hint" id="select-hint5">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-form-input__select-wrapper">
  <select class="kern-form-input__select kern-form-input__select--error" name="select5" aria-describedby="select-hint5 kern-input-error">
    <option>Bitte auswählen</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Dipl.-Ing.</option>
      <option>M.Sc.</option>
  </select>
</div>
<p class="kern-error" id="kern-input-error" role="alert">
  <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>
```

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

### HTML Loader Example

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

This HTML snippet demonstrates the basic structure of a Loader component. It includes ARIA attributes for screen readers and a visually hidden span for accessibility.

```html
<div class="kern-loader kern-loader--visible" role="status">
<span class="kern-sr-only">Wird geladen...</span>
</div>
```

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

### Input File: Default HTML Example

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

This HTML snippet demonstrates the default state of the Input File component, allowing users to upload files. It includes a label, hint text specifying allowed formats and file size, and the file input element.

```html
<div class="kern-form-input">
  <label class="kern-label" for="input-file">Datei hochladen</label>
  <div class="kern-hint" id="input-file-hint">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
  <input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>
```

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

### HTML Textarea Examples

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

Demonstriert verschiedene Zustände und Anwendungsfälle der HTML Textarea Komponente, einschließlich Default, Readonly, Disabled, Optional, sowie mit Hinweistext und Fehlermeldung.

```html
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>
```

```html
<div class="kern-form-input">
<label class="kern-label" for="textarea1">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea1" name="textarea1" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." readonly>Text</textarea>
</div>
```

```html
<div class="kern-form-input">
<label class="kern-label" for="textarea2">Ortsbeschreibung</label>
<textarea class="kern-form-input__input" id="textarea2" name="textarea2" value="Der Marktstand wird an der Ecke Kirchplatz und Jakobistraße aufgebaut, dort befinden sich auch die Stromanschlüsse." disabled></textarea>
</div>
```

```html
<div class="kern-form-input">
<label class="kern-label" for="textarea">Ortsbeschreibung <span class="kern-label__optional">- Optional</span></label>
<textarea class="kern-form-input__input" id="textarea" name="textarea"></textarea>
</div>
```

```html
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="textarea3">Ortsbeschreibung</label>
<div class="kern-hint" id="textarea-hint">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<textarea class="kern-form-input__input kern-form-input__input--error" id="textarea3" name="textarea" aria-describedby="textarea-hint textarea-error"></textarea>
<p class="kern-error" id="textarea-error" role="alert">
  <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>
```

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

### KERN Grid Column Offset (HTML)

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

Shows how to apply an offset to a column in the KERN Grid System, creating horizontal spacing. This example shifts a column by 3 grid units on medium screens.

```html
<div class="kern-container">
  <div class="kern-row">
    <div class="kern-col-12 kern-col-md-9 kern-col-md-offset-3">
      <div class="kern-form-input">
        <label class="kern-label" for="text">Name</label>
        <input class="kern-form-input__input" id="text" name="text" type="text">
      </div>
    </div>
  </div>
</div>
```

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

### KERN-UX Kopfzeile: Verwendung der Webkomponente (HTML)

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

Beispiele für die Verwendung der KERN-UX Kopfzeile Webkomponente in HTML. Zeigt die Standardverwendung, die Anpassung des Labels und die Konfiguration benutzerdefinierter Breakpoints.

```html
<kern-kopfzeile></kern-kopfzeile>
```

```html
<kern-kopfzeile>Custom Label</kern-kopfzeile>
```

```html
<kern-kopfzeile breakpoints="768px:720px, 1200px:1140px"></kern-kopfzeile>
```

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

### Default Description List (HTML)

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

Eine standardmäßige Description List, die Begriffe und deren Definitionen nebeneinander oder übereinander anzeigt. Sie ist nützlich, um Eingaben in Formularen oder kurze Informationen übersichtlich darzustellen.

```html
<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>
```

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

### KERN-UX Kopfzeile: Fluid Layout (HTML)

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

Ein Beispiel für die KERN-UX Kopfzeile im Fluid-Layout, das sich über die gesamte Breite des Containers erstreckt. Es kennzeichnet eine offizielle Website und nutzt die 'kern-container-fluid' Klasse.

```html
<div class="kern-kopfzeile">
<div class="kern-container-fluid">
  <div class="kern-kopfzeile__content">
    <span class="kern-kopfzeile__flagge" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16">
        <path fill="#000" d="M0 .5h24v5.333H0z" />
        <path fill="red" d="M0 5.833h24v5.333H0z" />
        <path fill="#FACA2C" d="M0 11.167h24V16.5H0z" />
      </svg>
    </span>
    <span class="kern-kopfzeile__label">
      Offizielle Website – Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>
```

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

### HTML: Large Bulleted List Example

Source: https://www.kern-ux.de/komponenten/text/list

Illustrates the creation of a large bulleted list using 'kern-list--bullet' and 'kern-list--large' classes for visually distinct unordered content. Suitable for prominent lists.

```HTML
<ul class="kern-list kern-list--bullet kern-list--large">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen</li>
</ul>
```

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

### KERN-UX Kopfzeile: Einbindung als Webkomponente (JavaScript/Module)

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

Anweisungen zur Einbindung der KERN-UX Kopfzeile Webkomponente. Dies kann entweder über eine externe Skript-Datei (CDN oder lokal) oder als NPM-Paket erfolgen, um eine konsistente Darstellung zu gewährleisten.

```javascript
<script type="module" src="{CDN PATH oder lokal}/dist/js/kern-kopfzeile.js"></script>
```

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

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

### Input Url: Default HTML Example

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

This HTML snippet demonstrates the default state of the Input Url component. It includes a label and an input field of type 'url'. This is the basic structure for collecting a web address.

```HTML
<div class="kern-form-input">
<label class="kern-label" for="url">Internetadresse (URL)</label>
<input class="kern-form-input__input" id="url" name="url" type="url">
</div>
```