Architecture Decision Record · 0017

`byte_theme:card-feature`: vierte Card-Familie-SDC als Pure-Slot Canvas-Wrapper für View-Mode-Featured-Renderings

TL;DR — Neue SDC byte_theme:card-feature als Pure-Slot Canvas-Wrapper für die Featured-Card (Bg-Image rechts, Dark-Theme, CTA-Pille). Card-Familie wächst auf fünf SDCs.

Kontext

Die SOLCOM-Karriere-Page (/karriere) zeigt im Hero-Bereich eine Top-Job-Featured-Card: rounded-2xl Container mit Dark-Theme, 60/40 horizontal split (Text links, Bg-Foto rechts mit Gradient-Overlay), CTA-Pille bottom-right. Visuelle Spec: Figma Frame 1166:38363 im File SOLCOM — Design System — Layouts (CHHDfbpX8Ys2LBiGs5HVK0).

Die bestehende Card-Familie hat vier SDCs (siehe ADR-0009 + ADR-0013):

card (prop-driven, gradient-stroke Bubble-Outline ohne Notch) — Drupal-Default-View-Mode-Listen
card-bubble-profile (slot-basiert, mit CTA-Notch) — Profile-Cards mit eigenständigem Button im Notch
card-bubble-profile-no-button (slot-basiert, ohne Notch) — Profile-Cards ohne CTA, freie Slot-Komposition
card-meta-list (slot-basiert, no-CTA Bubble-Frame) — Vacancy-Detail-Page Eckdaten-Container

Keine dieser Komponenten passt zur Featured-Card-Geometrie. Render-Quelle: Canvas-Content-Template node.vacancy.featured (neuer View-Mode featured). Die Card wird automatisch via neuem View-Display block_top_job (Filter field_top_job=1, items_per_page=1, View-Mode featured) auf der Karriere-Page eingebettet.

customer-lens-reviewer hat drei Topology-Optionen geprüft (Pure Slot, Hybrid, Comprehensive Slots) und Hybrid empfohlen — überstimmt durch User-Entscheidung zugunsten Pure Slot wegen Konformität mit dem allgemeinen Memory-Eintrag „Card-SDCs sollten Canvas-Wrapper sein".

Entscheidung

Neue SDC byte_theme:card-feature als Pure-Slot Canvas-Wrapper hinzufügen.

Pfad: web/themes/custom/byte_theme/components/card-feature/
Schema (card-feature.component.yml): ein Prop media (Geometrie-tragend, Bg-Foto rechts, Image-Object via $ref: json-schema-definitions://canvas.module/image); zwei Slots content und cta. Inhalt (eyebrow, heading, body, meta-rows, button) wird im Canvas-Tree als Slot-Children komponiert.
Twig (card-feature.twig): <article class="card-feature"> mit drei Sub-Containern: card-feature__media (Bg-Image plus Gradient-Overlay-Layer), card-feature__content (Slot-Block content), card-feature__cta (Slot-Block cta). Image wird via {% include 'canvas:image' %} mit lazy-Loading und responsive widths gerendert.
CSS (card-feature.tailwind.css): in @layer components. container-type: inline-size plus @container (max-width: 640px) für Mobile-Stack-Layout. Brand-Tokens via CSS-Custom-Properties. Kein hardcoded Hex, kein oklch. Datei wird via @import in src/main.css registriert.
Canvas-Registrierung: media als entity_reference mit target_type: media und Bundles image + svg_image.
Pure-Slot-Disziplin: Eyebrow ("Top Job"), Heading, Body, Meta-Items werden alle als Sibling-Components im content-Slot platziert. Der CTA-Button ist im cta-Slot.

Rejected alternatives

Hybrid-Topology (Props für eyebrow/heading_text + Slots nur für meta + cta) rejected

customer-lens-reviewer-Empfehlung mit Verweis auf ADR-0009-Präzedenz für View-Mode-Render. Verworfen, weil das User-Memory „Card-SDCs sollten Canvas-Wrapper sein" als Leitlinie über alle Cards außer dem Sonderfall byte_theme:card gesetzt ist. card-feature ist Greenfield ohne Reparatur-Druck, also schlägt die größere Memory-Regel den ADR-0009-Sonderfall.

Comprehensive Slots (eyebrow_slot, heading_slot, body_slot, meta_slot, cta_slot) rejected

Lens-bewertet als „kein Gewinn gegenüber Pure-Slot bei höherer API-Oberfläche". Slot-Granularität ohne Typ-Enforcement ist dekorativer Aufwand und erhöht Drift-Risiko über die Card-Familie.

card-SDC um neue style: feature Variant erweitern rejected

Würde das prop-driven card-Schema mit Conditional-Logik aufblasen. Drei dedizierte SDCs schlagen eine SDC mit Mode-Switch — analog zur ADR-0009-Argumentation und zur Button-System-Logik aus ADR-0004.

hero-billboard für die Featured-Card wiederverwenden rejected

hero-billboard ist full-bleed (h-dvh / h-3/4 / min-h-[500px]). Featured-Card im Figma ist contained mit rounded-2xl und max-Width im Page-Container. Forced-fit würde die zwei orthogonalen Use-Cases konfundieren.

card-vacancy-featured als vacancy-spezifischer Name rejected

Lens-Empfehlung, weil aktuell nur ein bekannter Use-Case. Verworfen zugunsten generic card-feature, weil das Render-Pattern (Featured-Card mit Bg-Image + Dark-Theme + CTA) wahrscheinlich für Blog-Featured / Service-Spotlight wiederverwendet wird.

Consequences

Card-Familie wächst von vier auf fünf SDCs: card (prop-driven), card-bubble-profile (slot, mit CTA-Notch), card-bubble-profile-no-button (slot, no-CTA), card-meta-list (slot, no-CTA Bubble), card-feature (slot, no-Bubble, dark-Theme, NEU).
Memory-Eintrag „Card-SDCs sollten Canvas-Wrapper sein" gilt für alle Cards außer dem Special-Case byte_theme:card. card-feature folgt der Regel.
Pflicht-Verfahren nach SDC-Hinzufügung: ComponentSourceManager::generateComponents('sdc') muss laufen. Anschließend müssen alle Canvas-Content-Templates, die card-feature nutzen, re-materialisiert werden.
Bg-Image-Field-Anforderung am Vacancy-Bundle. Im Vacancy-Bundle existiert heute kein passendes Image-Field. Begleitend wird ein neues field_top_job_image (Image-Media-Reference) am Vacancy-Bundle eingeführt. ADR-0014 bleibt unberührt.
Mobile-Layout via @container. container-type: inline-size plus @container (max-width: 640px)-Query schaltet das 60/40-Split auf vertikalen Stack um. Erfordert moderne Browser (Container-Queries: 2023+).
Keine Bubble-Frame-DRY-Beziehung zu den anderen Cards. card-feature nutzt nicht bubble-card-frame und ist visuell unabhängig. Brand-Konsistenz wird über Brand-Token hergestellt, nicht über geteilte Frame-Geometrie.
A11y des CTA-Pattern. Card selbst ist <article>, nicht clickable als Ganzes — der CTA-Button ist die einzige Interaktion. Die Featured-Card ist bewusst auf Lese-Erfahrung ausgelegt.
Cherry-Pick-Reibung gegen Upstream-Byte-Theme: keine, weil card-feature ein eigenständiger Component-Folder ohne Upstream-Pendant ist.
Render-Test (Anti-Drift) wird in Schritt 4 des Composite-Lauf-Plans nachgezogen (Vacancy-Featured-Content-Template-Test), nicht in dieser SDC-Phase.