Card Components Showcase
Explore our collection of responsive card layouts: content cards, glass effects, square cards with structured layout (text top 50%, image bottom 50%), lightbox views, and interactive elements. Each component adapts beautifully to different screen sizes and interaction methods.
Content Cards Responsive
Automatically adapts: Wide layout on desktop, mobile layout on tablets/phones • Navigate with arrow keys or swipe
Planungspakete Cards
Planning packages with pricing information • Grid layout for easy comparison
Content Cards Static
Single responsive card: Wide layout on desktop, mobile layout on tablets/phones
Konfigurationen Video Card
Video card with direct props • Wide layout on desktop, mobile layout on tablets/phones
Transportabilitaet Video Card
Video content with 16:9 aspect ratio on desktop, 16:10 on mobile • Same text space as content cards
Square Text Cards (Text-Icon Layout)
Square cards with text and optional icons • Navigate with arrow keys or swipe
Content Cards Responsive Glass
Automatically adapts: Wide layout on desktop, mobile layout on tablets/phones • Navigate with arrow keys or swipe
Content Cards Static Glass
Single responsive glass card: Wide layout on desktop, mobile layout on tablets/phones
Image Glass Card (Image-Only Layout)
Single image card with glass morphism effect
Square Glass Card (Square Layout)
Square card with title/subtitle/description (top) and image with 2:3 aspect ratio (bottom)
Square Glass Cards Scroll
Each card: title/subtitle/description (top) + image with 2:3 ratio (bottom) • Navigate with arrow keys or swipe
Glass Quote Cards
Quote-style cards with glass background and mixed bold/gray text • Perfect for testimonials and impactful statements
Button Components
Various button styles and variants
Button System Showcase
All Button Variants (Fixed Width)
Size Variations (Primary)
Landing Page Buttons (on dark background)
Common Button Combinations
Usage Instructions
How to use buttons in your code:
import { Button } from '@/components/ui';
// Basic usage (all buttons have fixed width)
<Button variant="primary">Click me</Button>
// With size
<Button variant="configurator" size="lg">
Configure Now
</Button>
// With click handler
<Button variant="success" onClick={handleClick}>
Save Changes
</Button>
// Custom styling
<Button variant="outline" className="custom-class">
Custom Button
</Button>