Contentpage mit allen Atomen (π Test)
Akkordeon
Mehrfachöffnung NICHT erlaubt und erstes Element default opened (1. Element)
Mehrfachöffnung erlaubt
Darstellung Grid Varianten
TEST FONTS
This is a test of the TradeGothicNextSR font - regular.
This is a test of the TradeGothicNextSR font - bold.
H1 Headline
H2 Headline
H3 Headline
p: Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nesciunt, possimus rerum molestiae sint quaerat maxime ea voluptate. Nemo molestiae mollitia vel atque omnis ipsam illo sint. Dolore, aliquam placeat.
q: Lorem ipsum dolor sit amet consectetur adipisicing elit.span: Lorem ipsum dolor sit amet consectetur adipisicing elit.
This is a test of the TradeGothicNext font - regular.
This is a test of the TradeGothicNext font - bold.
TEST IMAGE
Modal Test
Native Buttons (für Formulare)
Buttons (für CMS Inhalte)
Icon Only Buttons
Teaser Buttons
Editing Buttons
Text Links
Icons
Klein:
Groß:
UnorderedList
- Bullet Test
- Check Orange
- Check Green
- Check Black
- Deny Red (Close red)
OrderedList
- Element
- Element in Ebene 2
- Element
- Element
- Element
Quotes
Beispiel Zitat 1 ohne HTML TAG
Beispiel Zitat 2 P-TAG
Beispiel Zitat 3 Mixed HTML
Filter Tags (Original)
Tag Varianten mit Icons (Kundenportal Design)
Filled Variants
Outline Variants
Icon Positions
Without Icons
Decorational (Non-interactive, renders as span)
Interactive Example (Click to toggle)
Links in Fließtext
Lorem Ipsum ist Inner Textlink sadipscing für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft.
Link zu einer SeiteSections
Section 01
Breite: 6
Erste Farbe weiß
Übergang ist gerade
Zweite Farbe grau
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
Section 02
Breite: 10
Erste Farbe weiß
Übergang ist schräg
Zweite Farbe grau
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
Section 03
Breite: 8
Erste Farbe weiß
Übergang ist gerade
Zweite Farbe weiß
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
Section 04
Breite: 12
Mit XL Abstand oben & unten
Erste Farbe garu
Übergang ist gerade
Zweite Farbe grau
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
Section 05
Erste Farbe grau
Mit LG Abstand oben & unten
Übergang ist gerade
Zweite Farbe weiß
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
Section 06
Erste Farbe grau
Mit MD Abstand oben & unten
Übergang ist schräg
Zweite Farbe weiß
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quae eaque cupiditate dolores voluptatum, odio libero aspernatur? Provident aut, corrupti vitae aperiam accusantium molestiae eum numquam consequuntur facere recusandae!
TEST FONTS
This is a test of the TradeGothicNextSR font - regular.
This is a test of the TradeGothicNextSR font - bold.
H1 Headline
H2 Headline
H3 Headline
p: Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nesciunt, possimus rerum molestiae sint quaerat maxime ea voluptate. Nemo molestiae mollitia vel atque omnis ipsam illo sint. Dolore, aliquam placeat.
q: Lorem ipsum dolor sit amet consectetur adipisicing elit.span: Lorem ipsum dolor sit amet consectetur adipisicing elit.
This is a test of the TradeGothicNext font - regular.
This is a test of the TradeGothicNext font - bold.
Basic Box
Basic Box Col 4
div
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis tempore nihil et voluptas minima adipisci temporibus. Non incidunt ea quae quidem! Maxime unde laudantium, repellendus soluta voluptas quia modi dolorem.
Basic Box Col 4
span
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis tempore nihil et voluptas minima adipisci temporibus. Non incidunt ea quae quidem! Maxime unde laudantium, repellendus soluta voluptas quia modi dolorem.
Basic Box Column 6
auto
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis tempore nihil et voluptas minima adipisci temporibus. Non incidunt ea quae quidem! Maxime unde laudantium, repellendus soluta voluptas quia modi dolorem.
Input Atom
Das Input-Atom-System bietet eine minimale, barrierefreie Eingabekomponente, die mit InputWrapper für Labels, Info-Tooltips und Fehlermeldungen kombiniert werden kann.
Standalone (ohne Label)
Select Atom
Das Select-Atom bietet eine barrierefreie Dropdown-Komponente mit Unterstützung für Single- und Multi-Select.
Multi-Select
Upload Input
Search Input
Radio Atom
Das Radio-Atom bietet eine barrierefreie Radio-Button-Komponente mit Unterstützung für horizontale und vertikale Layouts.
Headlines
Homepage H1
Homepage H2
Homepage H3
Homepage H4
Homepage H5
Homepage H6
Homepage H1
Homepage H2
Homepage H3
Homepage H4
Homepage H5
Homepage H6
Typography
Hinweisbox Component
Success (Green) - with Icon
Änderungswunsch erfolgreich übermittelt
Info (Orange) - with Internal Link
Änderung von Transportleistungen
Info (Orange) - without Icon
Hinweis zur Bearbeitung
Info (Orange) - with External Link
Externe Ressourcen
Error (Red) - with Icon
Ein Fehler ist aufgetreten
Success - Minimal (no icon, no link)
Aktion erfolgreich
Skeleton Atoms
Diese Seite zeigt alle Skeleton-Varianten zur visuellen Prüfung.
1. Base Skeleton
Grundlegende Skeleton-Elemente mit verschiedenen Varianten.
Text (default)
Circular
Rectangular
2. SkeletonText
Mehrere Textzeilen mit automatisch kürzerer letzter Zeile.
2 Zeilen
3 Zeilen (default)
5 Zeilen
3. SkeletonCard
Card-Layout mit Header und Body.
4. SkeletonTable
Tabellen-Layout mit konfigurierbaren Zeilen und Spalten.
5 Zeilen x 4 Spalten (default)
3 Zeilen x 6 Spalten
5. SkeletonList
Listen-Layout mit Avatar und Textzeilen.
3 Items (default)
5 Items
6. Accessibility (ariaLabel)
Mit ariaLabel Prop werden ARIA-Attribute für Barrierefreiheit hinzugefügt. Der Screenreader liest den Label-Text.
SkeletonCard mit ariaLabel
SkeletonList mit ariaLabel
7. Kombiniertes Beispiel
Realistische Anwendung in einem Dashboard-Layout.
Table Atom Component Tests
Example 1: KeyValueTable - Simplified
| Stellplatz | 1/1 |
|---|---|
| Adresse | Boxhagener Str. 30, 10245 Friedrichshain |
| Transportleistung | KT1 |
| Summe | 728,96 € / Quartal1 |
Example 2: Basic Key-Value Table (Manual Construction)
| Stellplatz | 1/1 |
|---|---|
| Adresse | Boxhagener Str. 30, 10245 Friedrichshain |
| Transportleistung | KT1 |
| Summe | 728,96 € / Quartal1 |
Example 3: Table with Column Headers
| Product | Price | Availability |
|---|---|---|
| Bioabfall-Tonne 60L | 15,50 € / Monat | Available |
| Bioabfall-Tonne 120L | 24,80 € / Monat | Available |
| Bioabfall-Tonne 240L | 42,50 € / Monat | Limited |
Example 4: Table with Lists in Cells
| Included Services |
|
|---|---|
| Optional Add-ons |
|
Example 5: Complex Table with Mixed Content
| Day | Waste Type | Notes |
|---|---|---|
| Monday | Bioabfall | Regular schedule |
| Wednesday | Restmüll | Bi-weekly collection Next collection: 15.01.2026 |
| Friday | Wertstoff | Monthly collection |