Image-based variant showcasing design system integration. Replaces live theme preview with a configurable GIF or static image.
Props
imageOptionalSelect an image or GIF from your Webflow asset library to showcase the styling/theming demo
badgeTextOptionalText displayed in the badge above the section title
Default:
"Design System"sectionTitleOptionalMain heading for the section
Default:
"Complete Styling Control"sectionSubtitleOptionalSubtitle text below the section heading
Default:
"Full design system integration with shadcn/ui core tokens and libraries like tweakcn"feature1TitleOptionalTitle for the first feature
Default:
"CSS Variables"feature1DescriptionOptionalDescription for the first feature
Default:
"All components use CSS custom properties that automatically adapt to your design system. Change once, update everywhere."feature2TitleOptionalTitle for the second feature
Default:
"shadcn/ui Compatible"feature2DescriptionOptionalDescription for the second feature
Default:
"Built on the same design tokens as shadcn/ui. Drop in any shadcn component and it just works with your theme."feature3TitleOptionalTitle for the third feature
Default:
"tweakcn Ready"feature3DescriptionOptionalDescription for the third feature
Default:
"Fully compatible with tweakcn and other design tools. Adjust colors, spacing, and typography with zero code changes."showBadgeOptionalToggle the badge visibility above the section title
Default:
trueUsage
<StylingControlSectionImageWrapper image={assetImage} sectionTitle="Styling Demo" showBadge={true} />Category
LandingLibrary
webcn Landing Page
webcnFile Path
src/libraries/webcn/components/StylingControlSectionImage.webflow.tsx