solcom / docs / wiki / card-family

Card-Familie

Vier SDCs unter web/themes/custom/byte_theme/components/, die zusammen die Card-Topologie des SOLCOM-Frontends bilden. Trennung nach Render-Quelle (Slot vs. Prop) und Komposition (mit/ohne CTA).

Last synced: 2026-05-11 · Tags: sdc, ui, card · Audit: ../LOG.html

Familien-Mitglieder

bubble-profile — Canvas-Wrapper-Card mit Notch-Geometrie, Slot-driven Inhalt, integrierter CTA-Pille. Notch-Width passt sich per JS an die Pillen-Breite an.
bubble-profile-no-button — Variante ohne CTA-Pille; Inhalt via Slot. Gleiche Notch-Geometrie wie bubble-profile.
card — prop-driven Standard-Card mit Bubble-Frame-Outline. Wird in View-Mode-Listen rendert (z. B. Vacancy-Teaser). Kein Slot.
card-feature — Pure-Slot Canvas-Wrapper für View-Mode-Featured-Renderings. Vierte Card-Familie-SDC (siehe ADR-0017).
card-frame — Rechteckige Card (Border-Radius 20 px) mit vier Border-Varianten (none / default / speaker-top / speaker-bottom) × vier Hintergrund-Varianten (none / glass / farbe / bild). Optionaler Button-Notch unten-rechts via JS-Behavior card-frame-notch (analog Bubble-Card-Notch). Bild-Hintergrund über HTML-<img> + CSS-clip-path-Referenz auf SVG-<clipPath>, damit das Bild pixelgenau um den Notch herumläuft (siehe ADR-0038).

Aggregierte Quellen

Strand	Ref	Inhalt
adr	0005-bubble-card-notch-strategy	Notch-Geometrie via SVG plus JS-getriebene Pillen-Width-Anpassung. Foundation für `bubble-profile` und die no-button-Variante.
adr	0009-byte-theme-card-prop-driven-reintroduction	`card` als prop-driven Standard-Card mit Bubble-Frame-Outline wiedereingeführt — Render-Quelle Drupal-View-Modes (Field-Mapping), nicht Canvas-Slot.
adr	0013-card-meta-list-and-meta-row-topology	`card-meta-list` + `meta-row` als zwei neue SDCs für Field-gebundene Job-Meta-Listen innerhalb von `card`.
adr	0017-card-feature-sdc-fourth-card-family-member	`card-feature` als vierte SDC: Pure-Slot Canvas-Wrapper für View-Mode-Featured-Renderings — schließt die Familie nach oben (Featured-Composite) ab.
adr	0038-card-frame-rectangular-sdc	`card-frame` als fünfte SDC: rechteckige Card mit Border-Achse × Background-Achse, optionaler Speaker-Tail-Geometrie und Bild-Hintergrund mit SVG-clipPath. Parallel-Implementierung zu `bubble-card-frame`, kein Refactor.

Auswahl-Heuristik

Canvas-Komposition, freier Inhalt, mit CTA → bubble-profile
Canvas-Komposition, freier Inhalt, ohne CTA → bubble-profile-no-button
View-Mode-Liste (z. B. Vacancy-Teaser) → card mit card-meta-list innen
Canvas-Wrapper für ein Featured-Render (z. B. Stelle des Monats) → card-feature
Rechteckige Section-Karte mit Brand-Hintergrund (Glass / Color-Gradient / Foto) oder Sprechblasen-Geometrie → card-frame

Was diese Page nicht ist

Keine Decision. Eine fünfte Card-Variante oder ein Refactor existierender Karten gehört in einen neuen ADR — nicht hier.

Kein Implementation-Inventar. Status pro Component (matched/partial/gap) lebt in design/MAPPING.html.

Keine CVA-Doku. Klassen-Variants und Slot-vs-Prop-Heuristik liegen in den AGENTS.md des byte_theme und im Skill drupal-twig-sdc-authoring.