Dynamic Aesthetic Tabs - Feminine and Editorial Style

Enhance your content organization with the Dynamic Aesthetic Tabs widget. This component merges the sophisticated, editorial look of high-end beauty and wellness brands with robust, dynamic functionality.

Visually, it embraces a "feminine luxury" aesthetic. The layout features a unique arch-shaped image container that softens the page geometry, paired with the romantic italicized Playfair Display font for headlines. The color palette utilizes a warm terracotta accent (#CD7878) against a clean white background, creating a calm and inviting atmosphere.

Technically, this widget is built for flexibility. The tab navigation is auto-generated by JavaScript, meaning you can add, remove, or reorder slides in the CMS without touching the code. The text labels for the tabs are controlled by hidden editable fields within each slide, giving you complete control over the navigation hierarchy. It includes smooth fade-and-slide transitions between content panes, ensuring a polished user experience.

Key Features:

• Auto-Generated Navigation: Tab buttons are dynamically created based on your content slides, ensuring the design never breaks when adding new items.
• Editorial Typography: Features Italic Serif headlines paired with clean Sans-Serif body text for a magazine-style look.
• Arch-Image Layout: A unique 2-column grid where the image features a rounded "arch" top, perfect for lifestyle and portrait photography.
• Terracotta Accent: A warm, trendy accent color used for active states and hover effects (fully customizable via CSS variables).
• Fully Editable: Every text element includes data attributes for Font Family, Size, Weight, and Line Height, giving you granular design control directly from the editor.
• Responsive Design: Automatically stacks into a vertical layout on mobile devices with touch-friendly navigation buttons.