ANIMATED
CARDS
SECTION
1
Card sections organize complex information into scannable, bite-sized units that make browsing effortless and engaging. Whether showcasing services, projects, team members, or features, cards create visual consistency while allowing each item to stand independently with its own imagery, headline, and description. This modular approach gives visitors the freedom to explore content in any order, focusing on what interests them most, while the grid or flexible layout adapts beautifully across all devices.
Cards excel at presenting multiple offerings without overwhelming users, using consistent spacing, hover effects, and clear visual boundaries to create a polished, professional showcase that encourages interaction and deeper exploration of your work or services.
There is 1 page demonstrating Animated Card Sections - links to the other pages are at the bottom of this page
Fan cards, hover the card
3D Flip Cards
Animate left to right
I am a 3D Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos.
I am a button
I am another 3D Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a button
And another 3D Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a buttonFlip right to left
3D (Right to Left) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a button
3D (Right to Left) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a button
3D (Right to Left) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a buttonFlip bottom to top
3D (Bottom to Top) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa.
I am a button3D (Bottom to Top) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a button3D (Bottom to Top) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a buttonFlip top to bottom
3D (Top to Bottom) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa.
I am a button3D (Top to Bottom) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a button3D (Top to Bottom) Flip Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Span heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
I am a buttonInfo
Text
Here
3d Infographic Card
works with keyboard navigation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi.
Blog Cards
10
Sep
Leading-Edge Web Design in 2025: What’s New, What Works, and Why It Matters
Web design has always been about more than making things “look nice.” It’s about creating digital experiences that connect people with brands, products, and ideas.…
10
Sep
Become the AI Guru in Your Company: Why AI Training Matters Now
There’s no escaping it: AI is here, and it’s changing everything. From content creation and customer service to web design and data analysis, artificial intelligence…
10
Sep
The Future of Web Design and Content: Why AI + Creativity Is a Game Changer
There’s a quiet revolution happening in the digital world—and it’s powered by AI. From web design to content creation, artificial intelligence tools are transforming the…
10
Sep
Modern Web Design: Why Trends Matter (and Why You Need the Right Designer)
Websites aren’t static things anymore. They’re not dusty online brochures or digital business cards you set up once and forget. In today’s world, your website…
10
Sep
Why a Bespoke Website Beats Old-Style Templates Every Time
If you’ve ever scrolled through a website and thought, “This feels… generic”, you’ve probably landed on one built with an old-school fixed template. They look…
Scroll Activating Slideout Cards
Scroll Activation Card
Scroll Activation Card
Scroll Activation Card
Testimonial Cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta.
Team Cards
Jack Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos.
Jane Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos.
John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos.
Photo Saturation Cards
Photo Impact Hover Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa.
Photo Impact Hover Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa.
Photo Impact Hover Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa.
Product / Service Cards
Card Heading
Here goes your text ... Select any part of your text to access the formatting toolbar.
Card Heading
Here goes your text ... Select any part of your text to access the formatting toolbar.
Card Heading
Here goes your text ... Select any part of your text to access the formatting toolbar.