Component Collection for Canvas
Reusable components and patterns, directly from the distribution as an editable canvas page.
Hero level 2
For second-level landing pages with generous text space, breadcrumbs and strong image layout.
Hero level 3
A more compact hero variant for deeper page levels with limited container width and clear hierarchy.
Figma → DTCG → Drupal SDC → Canvas
UI components from Figma
These 24 sections come from the Figma page 🧩 Components · 0:1. The reviewed export covers 59 component sets, 959 definitions and 184 wired variables.
Accordion
Filled
Text content
Semantic content with a real Bootstrap collapse interaction.
Image composition
Reviewed slider structure
Plain
Text content
Semantic content with a real Bootstrap collapse interaction.
Image composition
Reviewed slider structure
Clear
Text content
Semantic content with a real Bootstrap collapse interaction.
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 with 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 clearly recognisable in body text und besitzt einen sichtbaren Fokus.
Info Panel
Information: this notice stays visible.
Caution: dismissible variant.
Lists
- SectionLinked item 3
-
Active item
-
Not available
- Circle
- Chevron
- Arrow
- Checkmark
- Cross
- Fa Icon
- Checkmark Circle
- Cross Circle
- 1 Small enumeration
- 2 Round enumeration
- 3 Plain enumeration
Modal
Media
PROGRESSIVE digital
Hospeltstr. 65-67, 50825 Köln
Navigation
Table
| # | Component | Status | Source |
|---|---|---|---|
| 1 | Button | Reviewed | Figma |
| 2 | Form | Reviewed | Figma |
Timeline
Inspect Figma
18 July 2026
Build Drupal
19 July 2026
Progress Bar
Pagination
Banner
Popover
Interactive positions: top, right, bottom and left.
Tooltip
Brief additional information
The information in the tooltip is never the only label.
Toast
The component has been saved.
Miscellaneous
Loading content
Loading content
Loading content
Loading content
Horizontal scroll area from the Figma scrollbar primitive
Divider, scrollbar and loading indicators.
Accordion
An accessible, canvas-editable accordion for structured answers and explanatory content.
Can components be edited directly in Canvas?
Yes. All SDC inputs and slots shown here are maintained via Canvas, while the markup and design system remain centrally versioned.
Will the edit remain accessible?
The components provide basic semantic structures, keyboard operation and visible focus states. Project-specific content remains to be checked editorially.
Are Figma changes released without review?
No. Token changes continue to go through review, build, and visual regression before reaching the sandbox.
Looking for more components?
The collection grows in a controlled manner with the released Figma patterns.
Accessible
Semantics and interactions are verified across all components.
Figma-led
Design references and tokens remain assigned in a traceable manner.
Canvas ready
Editorial teams visually combine approved inputs and slots.
Versioned
Recipes and regression tests keep the implementation reproducible.
Logo tiles
Components are created in four verifiable steps
From the Figma node to the reusable canvas component, every decision remains traceable.
Inspect Figma
Structure and tokens
The source node is inventoried together with its context, screenshot and variables.
Build SDC
Semantics first
Twig, Schema and SCSS form a stable, canvas-ready component.
Apply recipe
Reproducible
UUID-stable demo content verifies both installation and reapplication.
Check browser
Desktop to mobile
Playwright protects layout, usability and localized routes.
References
Maxine Mustermann
Position in the company
Short text about the person and their professional focus.
Testimonials
Two responsive variants of the reusable quote card.
A consistent component library accelerates design, editing and development alike.
Recipes make the tested design system version reproducible for new projects.