InfoPanel Component Showcase
Our modernized InfoPanel components feature enhanced depth effects, responsive layouts, and immersive hover animations to create a more engaging experience.
Standard Grid Layout (4 cards per row)
Horizontal Image
This card demonstrates a horizontal image layout with our standard amber/yellow theme.
Hover to see the immersive depth effects and animations!
Vertical Image
This card uses the blue theme variant with a vertical image layout.
Notice how vertical images are displayed properly with object-position: top.
Green Theme
This green-themed card shows a different color scheme while maintaining visual consistency.
Each card features subtle hover animations that bring it to life.
Red Theme
The red theme variant offers another distinct color option for highlighting different content types.
All cards maintain consistent depth and interaction behaviors.
Mixed Layout with Different Sizes
Small Card
This small card has no image and no left border, showing the component's versatility.
The grid system allows for flexible layouts with cards of different sizes.
Normal Width Card
This card spans two grid columns, creating a wider layout for more detailed content.
The size property allows easy control over card width in grid layouts.
Text-Only Card
Sometimes you don't need an image at all - this text-only variant works great for pure content.
The left accent border provides a subtle visual indicator of the card's theme.
Full-Width Cards
Full-Width Card with Horizontal Image
This full-width card demonstrates how the component scales to larger sizes.
Perfect for featured content that deserves more attention.
The responsive grid system ensures proper layout on all device sizes.
Content-Rich Full-Width Card
For content-heavy sections without images, the full-width text card provides ample space.
The modernized design maintains visual interest even without imagery.
Key Features:
- Animated gradient borders on hover
- Subtle 3D transform effects
- Themed color variations
- Responsive grid integration
- Support for different image orientations