Core Feature Tabs — Interactive feature tabs with icons.

Elevate your service or product presentations with the Core Feature Tabs component. This robust, interactive layout is specifically engineered to communicate complex features clearly and beautifully. It utilizes a classic dual-pane design: an interactive tab list (complete with custom icon support and progress indicators) on one side, and a dynamic media content area on the other.

What sets this component apart is its intelligent engine. It features an Auto-Play mode that cycles through your content, automatically pausing when the user interacts or scrolls away, thereby saving device resources. You can seamlessly mix high-resolution images and auto-playing videos. Fully responsive, it gracefully transitions from a side-by-side desktop layout into an intuitive stacked card on mobile, ensuring your core message is delivered perfectly across all devices.

Functions (Key Features):

• 🔄 Smart Auto-Play: Tabs cycle automatically. The engine intelligently pauses on hover or when off-screen to conserve CPU usage.

• 🧩 Custom SVG Icons: Assign unique, customizable icons (up to 5) to each tab to enhance visual hierarchy.

• 🎥 Hybrid Media Support: Seamlessly display responsive images or looping videos in the showcase area.

• 📱 Adaptive Responsiveness: Set precise width ratios for desktop, and control the exact height ratios when it stacks vertically on mobile.

• 📏 Precise Layout Control: Choose to align your tabs to the left or right, and align your media (Top/Center/Bottom) within the content panel.

How to Use:

1. Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.

2. Add Icons: Drag and drop your custom SVG icons into the Icon Tab 1-5 properties.

3. Add Content: In the properties panel, edit the Tab Contents array. Fill in the titles, descriptions, and upload your media (Image/Video).

4. Configure Layout: Set the Tab Position (Left/Right) and adjust the Desktop Tabs Width % to balance the split screen.

5. Styling: Customize the Accent Line, Backgrounds, and Text Colors to match your brand's aesthetic.