About Tilt Info Cards

What is Tilt Info Cards?

Tilt Info Cards is a premium layout component that arranges information cards and images in a visually striking fanned pattern. Each card tilts outward from center, creating dynamic depth that draws the eye across your content. Ideal for feature highlights, service overviews, team introductions, or any section where you need to present multiple pieces of content with editorial impact. Includes floating pill labels, connector lines, and call-to-action links on every card.

Core Features

Alternating card and image panels arranged in a dynamic tilted fan.
Floating pill labels with subtle connector lines visually link category tags to their corresponding cards
Four built-in colour themes (Dark, Light, Midnight, Warm) plus a full Custom mode for complete brand control
Responsive CSS-percentage layout — panels scale proportionally to any container width without manual sizing
Smooth hover interactions with configurable lift distance, shadow intensity, and animation speed

Controls inside Framer

Content

Cards (array) — pill label, title, description, CTA text, and CTA link per card
Images (array) — upload images to interleave between cards

Layout

Tilt Angle — fan rotation per panel from center (0–12 degrees)
Overlap — control how much panels overlap each other (0–65%)

Theme and Colors

Theme — Dark, Light, Midnight, Warm, or Custom
Custom Colors — card background, title, description, CTA, pill background, pill text, pill border, and connector line colours

Card Style

Border Radius
Padding
Shadow Intensity

Animation

Hover Lift distance
Speed (Fast, Medium, Slow)

Visibility

Show Pills toggle
Show Connectors toggle
Show Images toggle

Typography

Title Font
Body Font

Best use cases

SaaS feature sections — present three to four core product capabilities with supporting images between each
Agency service pages — showcase service offerings with tilted cards and team or project photography
Portfolio highlights — fan out selected projects with descriptions and direct links
Landing page hero supplements — place below the fold as a visually rich content block that reinforces key selling points

Every card includes a call-to-action link with hover animation, turning your layout into a conversion-ready section — not just a visual.