{"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\";\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: \"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\",\n          imageAlt: \"AI integration tutorial\",\n        },\n        {\n          title: \"Building Scalable APIs\",\n          category: \"Guide\",\n          link: \"/resources/scalable-apis\",\n          image: \"https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu\",\n          imageAlt: \"API development guide\",\n        },\n        {\n          title: \"Security Best Practices 2025\",\n          category: \"Whitepaper\",\n          link: \"/resources/security-practices\",\n          image: \"https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o\",\n          imageAlt: \"Security whitepaper\",\n        },\n        {\n          title: \"Cloud Migration Strategy\",\n          category: \"Case Study\",\n          link: \"/resources/cloud-migration\",\n          image: \"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\",\n          imageAlt: \"Cloud migration case study\",\n        },\n        {\n          title: \"DevOps Implementation Roadmap\",\n          category: \"Guide\",\n          link: \"/resources/devops-roadmap\",\n          image: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\n          imageAlt: \"DevOps guide\",\n        },\n        {\n          title: \"Data Privacy Compliance\",\n          category: \"Whitepaper\",\n          link: \"/resources/data-privacy\",\n          image: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\",\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,"minItems":3,"maxItems":12,"mediaHints":{"path":"resources[].image","roles":["gallery","feature"],"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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}},"exampleProps":{"heading":"Learning Resources","viewAllText":"View all resources","viewAllHref":"/resources","background":"gray","spacing":"xl","resources":[{"title":"Getting Started with AI Integration","category":"Tutorial","link":"/resources/ai-integration-guide","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI integration tutorial"},{"title":"Building Scalable APIs","category":"Guide","link":"/resources/scalable-apis","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"API development guide"},{"title":"Security Best Practices","category":"Whitepaper","link":"/resources/security-practices","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security whitepaper"},{"title":"Cloud Migration Strategy","category":"Case Study","link":"/resources/cloud-migration","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud migration case study"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","resources","links","documentation","learning","three-column"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. category link The sidebar only ever shows the first 3 resources – this is intentional. The carousel shows all of them. Clicking a carousel image opens a built-in lightbox viewer; this is automatic and requires no extra configuration. Provide at least 3 resources to populate the sidebar; 5–8 is ideal for the carousel. 'viewAllText' and 'viewAllHref' are optional but recommended for discoverability.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"resources":{"minItems":3,"maxItems":12}},"mediaSlots":{"resources[].image":{"path":"resources[].image","roles":["gallery","feature"],"required":false}}}}},"timestamp":"2026-06-27T20:04:56.616Z"}