Squarespace 7.1UI Components

3D Cards Widget

By Common Ninja

Free
3D Cards Widget – Squarespace UI Components on SquareLocator
Fit check
Great for
Teams optimizing visitor navigation
Businesses needing improved site hierarchy
Users looking for easier mobile navigation solutions
Version7.1
SetupModerate

Overview

Squarespace has no native way to build interactive flip cards, and this free widget from Common Ninja fills that gap. You design your cards in Common Ninja's visual editor, then paste a single line of embed code into a Squarespace code block. The cards respond to hover with a 3D animation, flip to reveal more detail on the back, and can carry buttons linking anywhere on your site, which makes them handy for services, pricing tiers or team profiles. Multiple layouts and skins are included, edits sync automatically without touching the embed again, and the free plan is genuinely usable, though it caps monthly views, so busier sites will want a paid tier.

This is a content display widget rather than a navigation tool: it lets you add interactive 3D cards to any Squarespace page, the kind that tilt in response to the visitor's cursor and flip over to reveal more information on the back. Squarespace's own blocks offer nothing comparable, so if you want that effect, an embed like this is the practical route.

Setup follows the standard Common Ninja pattern. You build your cards in their visual editor, choosing from ready-made layouts, skins and templates, adding images or icons, and attaching a button to each card that can link to any page (a checkout, a service page, a booking form). Then you copy one line of embed code into a Squarespace code block. Any edits you make later in the Common Ninja dashboard update on your site automatically, so you never touch the embed again.

Good uses we have seen: service cards that flip to show pricing, team profiles with a bio on the back, feature highlights on a landing page, and portfolio pieces with project details on the reverse. The cards are fully responsive, and custom CSS is available if the built-in skins do not quite match your brand.

Two things to weigh up before relying on it. First, it is an externally hosted embed, so the cards load from Common Ninja's servers rather than your site; sensible to keep to one or two instances per page. Second, the free plan caps monthly views, and once a busy site passes the cap the widget can stop displaying until the month resets or you upgrade. For a low-traffic page that is a non-issue; for a homepage with real traffic, budget for a paid tier. You will also need a Squarespace plan that supports embedded code.
What it does
  • User-friendly multi-level menus
  • Streamlined mobile navigation
  • Intuitive site management
  • No custom coding required
Full specifications

FAQs

FAQs

How do I add the 3D Cards widget to Squarespace?
Build your cards in Common Ninja's visual editor, then paste the single line of embed code into a Squarespace code block. Edits made later in the dashboard update on your site automatically.
Is the 3D Cards widget free?
There is a genuinely usable free plan, but it caps monthly views. Paid plans raise the limits and unlock extra features, which matters on higher-traffic pages.
Do I need coding skills?
No. The editor is fully visual, with ready-made layouts, skins and templates. Custom CSS is available if you want finer control, but it is optional.
What can the cards actually do?
They animate in 3D as visitors hover, flip to reveal content on the back, display images or icons, and can carry a button linking to any page, such as a checkout or booking form.
Does it work on mobile?
Yes, the widget is fully responsive and adapts to phones and tablets.
Are there any limitations to know about?
It is an externally hosted embed, so the cards load from Common Ninja's servers, and once a free plan passes its monthly view cap the widget can stop displaying until you upgrade or the month resets. You will also need a Squarespace plan that supports embedded code.