{ "$schema": "https://examples.itlive.nl/docs/itlive-widget-registry.schema.json", "$id": "https://examples.itlive.nl/docs/itlive-widget-registry.json", "title": "IT Live canonical widget & section registry (industry-agnostic)", "version": "1.1.1", "description": "Use canonical_type in AI seeds. showcase_card_v / showcase_flow_v map to itlive-test-suite.html labels. Extended with section mapping, contracts and quality baselines. Includes section_labels_nl for UI (orchestration + VE).", "page_skeleton": [ "header", "hero", "trust", "services", "features", "process", "portfolio", "pricing", "faq", "cta", "contact", "footer" ], "showcase_groups": { "cards": { "range": "V1-V10", "section": "Showcase: 10+ Service Cards" }, "flows": { "range": "V1-V10", "section": "Showcase: 10+ Werkwijze Flows" }, "note": "V numbers are duplicated between groups — always qualify: Card V8 vs Flow V8." }, "widgets": { "card_standard": { "showcase_card_v": "V1", "terms": [ "service card", "image card", "content card" ] }, "card_neumorphic": { "showcase_card_v": "V2", "terms": [ "neumorphism", "soft UI" ] }, "card_glass": { "showcase_card_v": "V3", "terms": [ "glassmorphism", "frosted glass" ] }, "card_gradient": { "showcase_card_v": "V4", "terms": [ "gradient card", "brand panel" ] }, "card_dark": { "showcase_card_v": "V5", "terms": [ "dark card", "inverted card" ] }, "card_outline": { "showcase_card_v": "V6", "terms": [ "outline card", "bordered card" ] }, "carousel_split_service": { "showcase_card_v": "V7", "terms": [ "split slider", "swiper split", "image + body slide" ] }, "carousel_service_cards": { "showcase_card_v": "V8", "terms": [ "card carousel", "multi-slide carousel", "autoplay" ] }, "carousel_nested_services": { "showcase_card_v": "V8b", "terms": [ "nested carousel", "per-service slider" ] }, "pricing_table": { "showcase_card_v": "V9", "terms": [ "pricing table", "plan tiers", "comparison cards" ] }, "feature_list": { "showcase_card_v": "V10", "terms": [ "feature list", "detailed list", "link rows" ] }, "flow_neon_steps": { "showcase_flow_v": "V1", "terms": [ "step rail", "neon sequence" ] }, "flow_orbital": { "showcase_flow_v": "V2", "terms": [ "orbital steps", "bubble flow" ] }, "flow_timeline_zigzag": { "showcase_flow_v": "V3", "terms": [ "zig-zag timeline", "alternating timeline" ] }, "flow_tabs": { "showcase_flow_v": "V4", "terms": [ "tabbed flow", "tab panel" ] }, "flow_stepper_vertical": { "showcase_flow_v": "V5", "terms": [ "vertical stepper", "numbered steps" ] }, "flow_accordion": { "showcase_flow_v": "V6", "terms": [ "accordion", "disclosure", "FAQ" ] }, "flow_timeline_dots": { "showcase_flow_v": "V7", "terms": [ "dot timeline", "milestone strip" ] }, "flow_roadmap_grid": { "showcase_flow_v": "V8", "terms": [ "grid roadmap", "phase grid" ] }, "flow_cards_reveal": { "showcase_flow_v": "V9", "terms": [ "reveal cards", "hover lift cards" ] }, "flow_minimal_steps": { "showcase_flow_v": "V10", "terms": [ "minimal roadmap", "typographic steps" ] }, "hero_full_bleed_carousel": { "showcase": "V0 hero strip", "terms": [ "hero carousel", "full bleed", "itliveHeroTopSwiper" ] }, "hero_split_value_prop": { "showcase": "V0 hero split", "terms": [ "split hero", "value proposition hero", "media text hero" ] }, "hero_minimal_centered": { "showcase": "V0 hero minimal", "terms": [ "minimal hero", "centered headline", "clean hero" ] }, "trust_logo_cloud": { "showcase": "trust logos", "terms": [ "logo cloud", "client logos", "partner strip" ] }, "trust_review_badges": { "showcase": "trust reviews", "terms": [ "review badges", "rating strip", "social proof" ] }, "service_grid_icons": { "showcase": "services grid", "terms": [ "icon grid", "service tiles", "feature grid" ] }, "service_tabs_detail": { "showcase": "services tabs", "terms": [ "service tabs", "detail tabs", "tabbed services" ] }, "feature_highlight_split": { "showcase": "feature split", "terms": [ "feature split", "media highlight", "benefit spotlight" ] }, "process_timeline_compact": { "showcase": "process compact", "terms": [ "compact timeline", "3-step process", "quick process" ] }, "portfolio_masonry": { "showcase": "portfolio masonry", "terms": [ "masonry gallery", "project grid", "work showcase" ] }, "portfolio_before_after": { "showcase": "portfolio before-after", "terms": [ "before after", "comparison slider", "renovation showcase" ] }, "pricing_cards_toggle": { "showcase": "pricing toggle", "terms": [ "monthly yearly", "pricing switch", "plan switcher" ] }, "faq_two_column": { "showcase": "faq 2col", "terms": [ "two-column faq", "faq grid", "faq split" ] }, "cta_banner_split": { "showcase": "cta split", "terms": [ "cta banner", "conversion strip", "final cta" ] }, "contact_form_map": { "showcase": "contact map", "terms": [ "contact map", "form + map", "location contact" ] }, "footer_multi_column": { "showcase": "footer multi", "terms": [ "mega footer", "multi-column footer", "footer links" ] } }, "canonical_types_by_section": { "header": [ "nav_standard", "nav_mega", "nav_minimal" ], "hero": [ "hero_full_bleed_carousel", "hero_split_value_prop", "hero_minimal_centered" ], "trust": [ "trust_logo_cloud", "trust_review_badges" ], "services": [ "card_standard", "carousel_service_cards", "service_grid_icons", "service_tabs_detail" ], "features": [ "feature_list", "feature_highlight_split", "card_gradient" ], "process": [ "flow_neon_steps", "flow_timeline_zigzag", "process_timeline_compact" ], "portfolio": [ "portfolio_masonry", "portfolio_before_after", "flow_cards_reveal" ], "pricing": [ "pricing_table", "pricing_cards_toggle" ], "faq": [ "flow_accordion", "faq_two_column" ], "cta": [ "cta_banner_split", "card_gradient" ], "contact": [ "contact_form_map", "flow_tabs" ], "footer": [ "footer_multi_column", "card_dark" ] }, "section_labels_nl": { "header": "Navigatie", "hero": "Hero", "trust": "Trust / social proof", "services": "Diensten", "features": "Features", "process": "Proces / werkwijze", "portfolio": "Portfolio", "pricing": "Prijzen", "faq": "FAQ", "cta": "Call-to-action", "contact": "Contact", "footer": "Footer" }, "section_widget_matrix": { "required_sections": [ "header", "hero", "services", "cta", "contact", "footer" ], "optional_sections": [ "trust", "features", "process", "portfolio", "pricing", "faq" ], "default_widgets": { "header": "nav_standard", "hero": "hero_full_bleed_carousel", "services": "card_standard", "cta": "cta_banner_split", "contact": "contact_form_map", "footer": "footer_multi_column" } }, "ai_seed_contract": { "required_fields": [ "page_id", "section_id", "canonical_type", "variant", "content_goal", "audience_intent", "tone", "animation_preset" ], "optional_fields": [ "showcase_card_v", "showcase_flow_v", "asset_requirements", "tracking_event", "ab_test_variant" ], "rules": [ "Use only canonical_type values present in widgets keys.", "If canonical_type maps to cards use showcase_card_v when available.", "If canonical_type maps to flows use showcase_flow_v when available.", "Unknown canonical_type must be rejected and logged." ] }, "widget_contracts": { "nav_standard": { "required_slots": [ "brand", "menu_items", "cta" ], "responsive_behavior": "collapses to mobile drawer below 1024px" }, "hero_full_bleed_carousel": { "required_slots": [ "slides", "headline", "subline", "primary_cta" ], "responsive_behavior": "single slide viewport on mobile" }, "card_standard": { "required_slots": [ "title", "text", "image_or_icon", "cta_optional" ], "responsive_behavior": "1-2-3 columns (mobile-tablet-desktop)" }, "flow_accordion": { "required_slots": [ "items" ], "responsive_behavior": "single-column stacked" }, "contact_form_map": { "required_slots": [ "form_fields", "contact_info", "map_embed_or_placeholder" ], "responsive_behavior": "stacked mobile, split desktop" }, "footer_multi_column": { "required_slots": [ "columns", "legal_links", "copyright" ], "responsive_behavior": "accordion columns on mobile" } }, "animation_presets": { "reveal_up_soft": [ "reveal-up" ], "reveal_stagger_cards": [ "reveal-up", "reveal-delay-1", "reveal-delay-2" ], "slide_in_side": [ "reveal-left", "reveal-right" ], "minimal_no_motion": [ "none" ] }, "quality_baseline": { "accessibility": [ "WCAG 2.2 AA contrast minimum for text.", "Keyboard navigable interactive elements.", "All meaningful images require alt text." ], "performance": [ "Lazy-load non-critical media.", "Prefer modern formats (webp/avif where possible).", "Avoid render-blocking scripts in hero." ], "seo": [ "Single H1 per page.", "Section semantics should map to heading hierarchy.", "FAQ section should support FAQPage schema when used." ] }, "governance": { "naming_rules": [ "Use snake_case for widget keys.", "Prefix experimental widgets with x_ and exclude from defaults.", "Do not reuse existing key names with different behavior." ], "deprecations": [], "change_policy": "Minor version for additive changes, major version for breaking canonical key changes." }, "tech_stack": { "slider": "Swiper 10 (CDN)", "icons": "Font Awesome 6", "animation_light": "CSS transitions / keyframes", "animation_vector": "Lottie (JSON), optional", "animation_advanced": "GSAP optional", "layout": "CSS Grid, Flexbox, clamp()", "theming": "CSS custom properties --primary etc." }, "related_files": [ "WEBSITE_WIDGETS.md", "SITE_ARCHETYPES.md", "AGENT_RULES_AND_WORKSPACE.md", "CAROUSEL_AGENT_SPEC.md", "includes/carousel-manifest-render.php", "api/carousel-manifest.php", "itlive-test-suite.html", "data/pages-manifest.example.json", "data/hero-slides.example.json", "data/api-keys.example.json", "ENGINE_TERMINOLOGY_AND_SEEDING.md", "STACK.md", "ENGINE_GLOBAL_STACK_REFERENCE.md", "templates/AGENT_TEMPLATE_GUIDE.md", "docs/swarm-functions.json", "docs/swarm-functions.schema.json" ] }