Component Collection für Canvas
Wiederverwendbare Komponenten und Patterns, direkt als editierbare Canvas-Seite aus der Distribution.
Hero Level 2
Für Landingpages der zweiten Ebene mit großzügiger Textfläche, Breadcrumb und bildstarker Aufteilung.
Hero Level 3
Eine kompaktere Hero-Variante für tiefere Seitenebenen mit begrenzter Containerbreite und klarer Hierarchie.
Figma → DTCG → Drupal SDC → Canvas
UI-Komponenten aus Figma
Diese 24 Bereiche stammen aus der Figma-Seite 🧩 Components · 0:1. Der geprüfte Export umfasst 59 Component Sets, 959 Definitionen und 184 verdrahtete Variablen.
Accordion
Filled
Text content
Semantischer Inhalt mit echter Bootstrap-Collapse-Interaktion.
Image composition
Reviewed slider structure
Plain
Text content
Semantischer Inhalt mit echter Bootstrap-Collapse-Interaktion.
Image composition
Reviewed slider structure
Clear
Text content
Semantischer Inhalt mit echter Bootstrap-Collapse-Interaktion.
Image composition
Reviewed slider structure
Badge
Primary
Primary Soft
Primary Pill
Secondary
Secondary Soft
Secondary Pill
Success
Success Soft
Success Pill
Danger
Danger Soft
Danger Pill
Warning
Warning Soft
Warning Pill
Info
Info Soft
Info Pill
Dark
Dark Soft
Dark Pill
Light
Light Soft
Light Pill
Heading mit Badge
NeuHeading
Subheading
Heading
Einleser (optional)
Button
Button Group
Card
Card · 263:11392
Heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Card-Icon · 149:8134
Chip
Drupal
Dropdown
Form
Icon Link
Inline Link
Ein Link bleibt im Fließtext klar erkennbar und besitzt einen sichtbaren Fokus.
Info Panel
Information: Dieser Hinweis ist dauerhaft sichtbar.
Achtung: Schließbare Variante.
Lists
- BereichVerlinkter Eintrag 3
-
Aktiver Eintrag
-
Nicht verfügbar
- Circle
- Chevron
- Arrow
- Checkmark
- Cross
- Fa Icon
- Checkmark Circle
- Cross Circle
- 1 Kleine Enumeration
- 2 Runde Enumeration
- 3 Klare Enumeration
Modal
Media
PROGRESSIVE digital
Hospeltstr. 65-67, 50825 Köln
Navigation
Table
| # | Komponente | Status | Quelle |
|---|---|---|---|
| 1 | Button | Geprüft | Figma |
| 2 | Form | Geprüft | Figma |
Timeline
Figma lesen
18. Juli 2026
Drupal bauen
19. Juli 2026
Progress Bar
Pagination
Banner
Popover
Interaktive Positionen: oben, rechts, unten und links.
Tooltip
Kurze Zusatzinformation
Die Information im Tooltip ist nie die einzige Beschriftung.
Toast
Die Komponente wurde gespeichert.
Miscellaneous
Inhalt wird geladen
Inhalt wird geladen
Inhalt wird geladen
Inhalt wird geladen
Horizontale Scrollfläche aus dem Figma-Scrollbar-Primitive
Divider, Scrollbar und Ladeindikatoren.
Accordion
Ein barrierefreies, Canvas-editierbares Accordion für strukturierte Antworten und erklärende Inhalte.
Sind Komponenten direkt in Canvas editierbar?
Ja. Alle hier gezeigten SDC-Inputs und Slots werden über Canvas gepflegt, während Markup und Designsystem zentral versioniert bleiben.
Bleibt die Ausgabe barrierefrei?
Die Komponenten liefern semantische Grundstrukturen, Tastaturbedienung und sichtbare Fokuszustände. Projektspezifische Inhalte bleiben zusätzlich redaktionell zu prüfen.
Werden Figma-Änderungen ungeprüft veröffentlicht?
Nein. Token-Änderungen durchlaufen weiterhin Review, Build und visuelle Regression, bevor sie die Sandbox erreichen.
Weitere Komponenten gesucht?
Die Sammlung wächst kontrolliert mit den freigegebenen Figma-Patterns.
Barrierefrei
Semantik und Interaktion werden komponentenweit geprüft.
Figma-geführt
Designreferenzen und Tokens bleiben nachvollziehbar zugeordnet.
Canvas-ready
Redaktionen kombinieren freigegebene Inputs und Slots visuell.
Versioniert
Recipes und Regressionstests halten den Stand reproduzierbar.
Logo-Tiles
Komponenten entstehen in vier überprüfbaren Schritten
Vom Figma-Node bis zur wiederverwendbaren Canvas-Komponente bleibt jede Entscheidung nachvollziehbar.
Figma lesen
Struktur und Tokens
Der führende Node wird mit Kontext, Screenshot und Variablen inventarisiert.
SDC bauen
Semantik zuerst
Twig, Schema und SCSS bilden eine stabile, Canvas-fähige Komponente.
Recipe anwenden
Reproduzierbar
UUID-stabile Demo-Inhalte prüfen Installation und erneutes Anwenden.
Browser prüfen
Desktop bis Mobile
Playwright schützt Geometrie, Bedienbarkeit und Sprachpfade.
Referenzen
Maxine Mustermann
Position im Unternehmen
Kurzer Text zur Person und ihrem fachlichen Schwerpunkt.
Testimonials
Zwei responsive Varianten der wiederverwendbaren Zitatkarte.
Eine konsistente Komponentenbibliothek beschleunigt Design, Redaktion und Entwicklung gleichermaßen.
Recipes machen den getesteten Designsystem-Stand für neue Projekte reproduzierbar.