{"success":true,"data":{"block":{"id":"carousel-sidebar-resources","name":"Carousel Sidebar Resources","title":"Carousel Sidebar Resources","category":"Gallery","categorySlug":"gallery","description":"A carousel with a sidebar resource list in a three-column layout. Features categorized resource links alongside image carousel. Ideal for documentation, resource libraries, learning platforms, or any content that combines visual browsing with organized link navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290121/t8xashbpevmkab41hs8k7zwh3ao3/carousel-sidebar-resources-desktop.png","mobile":"https://cdn.ing/assets/i/r/290120/tb17g28rqy2fqb3j3bm70wen5q05/carousel-sidebar-resources-mobile.png"},"componentPath":"blocks/gallery/carousel-sidebar-resources.tsx","code":"import { CarouselSidebarResources } from \"@opensite/ui/blocks/gallery/carousel-sidebar-resources\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselSidebarResources\n      heading=\"Learning Resources\"\n      resources={[\n        {\n          title: \"Getting Started with AI Integration\",\n          category: \"Tutorial\",\n          link: \"/resources/ai-integration-guide\",\n          image: imagePlaceholders[90],\n          imageAlt: \"AI integration tutorial\",\n        },\n        {\n          title: \"Building Scalable APIs\",\n          category: \"Guide\",\n          link: \"/resources/scalable-apis\",\n          image: imagePlaceholders[91],\n          imageAlt: \"API development guide\",\n        },\n        {\n          title: \"Security Best Practices 2025\",\n          category: \"Whitepaper\",\n          link: \"/resources/security-practices\",\n          image: imagePlaceholders[92],\n          imageAlt: \"Security whitepaper\",\n        },\n        {\n          title: \"Cloud Migration Strategy\",\n          category: \"Case Study\",\n          link: \"/resources/cloud-migration\",\n          image: imagePlaceholders[93],\n          imageAlt: \"Cloud migration case study\",\n        },\n        {\n          title: \"DevOps Implementation Roadmap\",\n          category: \"Guide\",\n          link: \"/resources/devops-roadmap\",\n          image: imagePlaceholders[94],\n          imageAlt: \"DevOps guide\",\n        },\n        {\n          title: \"Data Privacy Compliance\",\n          category: \"Whitepaper\",\n          link: \"/resources/data-privacy\",\n          image: imagePlaceholders[95],\n          imageAlt: \"Data privacy whitepaper\",\n        },\n      ]}\n      viewAllText=\"View all resources\"\n      viewAllHref=\"/resources\"\n      background=\"gray\"\n      spacing=\"xl\"\n      pattern=\"gridFadeBottomRight\"\n      patternOpacity={0.6}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"resources":{"type":"array","description":"Array of resources to display","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title of the resource","typeLabel":"React.ReactNode","required":true},"category":{"type":"object","description":"Category label","typeLabel":"React.ReactNode","required":true},"link":{"type":"string","description":"Link URL for the resource","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"className":{"type":"string","description":"Additional CSS classes for the resource item","required":false}},"typeLabel":"CarouselSidebarResource"},"typeLabel":"CarouselSidebarResource[]","required":false},"resourcesSlot":{"type":"object","description":"Custom slot for rendering resources (overrides resources array)","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering the sidebar","typeLabel":"React.ReactNode","required":false},"viewAllText":{"type":"object","description":"Text for the \"View all resources\" link","typeLabel":"React.ReactNode","required":false},"viewAllHref":{"type":"string","description":"URL for the \"View all resources\" link","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","resources","links","documentation","learning","three-column"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'resources' array for this sidebar-resources carousel; the demo uses 6. Each item requires a real image from the media library. DO NOT USE this block unless you have at least 4 real images from the media library. Use only real resource links from the site's content for the 'link' field; do not invent URLs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:01.573Z"}