Effects · Gutenberg
Card Stack block for WordPress
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Inspector panels on this block: Stack, Display, Default Colors, Cards, Card Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Stack style” options: Fan (cards rotate on hover), Pile (offset vertically), Spread (horizontal fan).
Where to find it
Gutenberg inserter → Effects → search “Card Stack” (block name `blockenberg/card-stack` in block.json). Style it in the sidebar after insert.
How to use Card Stack block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Card Stack”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Stack. Set “Stack style”, “Card width (px)”, “Card min height (px)”, “Card border radius (px)”.
- Check the published page. The view script reads HTML data attributes: data-active-color, data-animate, data-behind, data-offset-x, data-offset-y, data-rotation, data-style. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Stack style | Select control; the chosen value is saved on the block. Options: Fan (cards rotate on hover); Pile (offset vertically); Spread (horizontal fan). block.json default: fan. Saved as `stackStyle`. |
| Card width (px) | Numeric range control in the inspector. Range 240–600. block.json default: 380. Saved as `cardWidth`. |
| Card min height (px) | Numeric range control in the inspector. Range 160–600. block.json default: 260. Saved as `cardMinHeight`. |
| Card border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–64. block.json default: 32. Saved as `cardPadding`. |
| Rotation spread (°) | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `rotationSpread`. |
| Offset X (px) | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `offsetX`. |
| Offset Y (px) | Numeric range control in the inspector. Range 0–40. block.json default: 6. Saved as `offsetY`. |
| Cards visible behind | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `maxVisibleBehind`. |
| Show quote mark | On/off toggle in the inspector. On by default. Saved as `showQuoteMark`. |
| Show tag | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Show author | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Show nav dots | On/off toggle in the inspector. On by default. Saved as `showNavDots`. |
| Animate in on scroll | On/off toggle in the inspector. On by default. Saved as `animateIn`. |
| Tag size (px) | Numeric range control in the inspector. Range 9–16. block.json default: 11. Saved as `tagSize`. |
| Author size (px) | Numeric range control in the inspector. Range 11–18. block.json default: 13. Saved as `authorSize`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `globalCardBg`. |
| Card text | Color control in the inspector. block.json default: #111827. Saved as `globalTextColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
| Cards — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Show as quote | On/off toggle in the inspector. |
| Tag | Text field in the inspector. |
| Author name | Text field in the inspector. |
| Author role | Text field in the inspector. |
| Card Colors — Background | Color control in the inspector. |
| Card Colors — Text | Color control in the inspector. |
| Accent | Color control in the inspector. |
| Tag background | Color control in the inspector. |
| Tag text | Color control in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-active-color, data-animate, data-behind, data-offset-x, data-offset-y, data-rotation, data-style.
- An IntersectionObserver starts work when the block enters the viewport.
- Keyboard handlers move focus between items.
When this is the right block
- A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights — that is the job of Card Stack, not a generic content block.
- Use it when you need the editor control labeled “Stack style”, which exists on this block’s inspector.
- It matches pages about cards, stack, fan.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Card Stack block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Card Stack”. It sits under Effects. After insert, open Stack and set “Stack style”, “Card width (px)”, “Card min height (px)”, “Card border radius (px)”.
What makes Card Stack different from other Blockenberg blocks?
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights. Inspector labels on this block include “Stack style”, “Card width (px)”, “Card min height (px)”, “Card border radius (px)”.
Is the Card Stack Gutenberg block free?
Yes. Card Stack ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Card Stack to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Stack, Display, Default Colors, Cards).
Related effects blocks
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Hovering Image Stack
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images.
Floating Stats
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Card Stack from the Gutenberg inserter.