Effects · Gutenberg
Marquee Cards block for WordPress
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
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
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Inspector panels on this block: Cards, Scroll, Card Appearance, Image. Those titles come from index.js, not from a shared template.
Behavior controls: “Direction” options: Left, Right.
Where to find it
Gutenberg inserter → Effects → search “Marquee Cards” (block name `blockenberg/marquee-cards` in block.json). Style it in the sidebar after insert.
How to use Marquee Cards block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Marquee Cards”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards. Set “Tag / Category”, “Heading”, “Description”, “Link URL”.
- Check the published page. The view script reads HTML data attributes: data-anim, data-card-gap, data-card-width, data-direction, data-fade, data-hover-lift, data-pause, data-reverse. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tag / Category | Text field in the inspector. |
| Heading | Text field in the inspector. |
| Description | Text field in the inspector. |
| Link URL | Text field in the inspector. |
| Link Label | Text field in the inspector. |
| Speed (s for full loop) | Numeric range control in the inspector. Range 5–120. block.json default: 40. Saved as `speed`. |
| Direction | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `direction`. |
| Pause on Hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Two Rows (second row reversed) | On/off toggle in the inspector. Off by default. Saved as `twoRows`. |
| Fade Edges | On/off toggle in the inspector. On by default. Saved as `fadeEdges`. |
| Wrapper Padding Y (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingY`. |
| Card Width (px) | Numeric range control in the inspector. Range 140–600. block.json default: 280. Saved as `cardWidth`. |
| Card Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `cardGap`. |
| 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 8–60. block.json default: 20. Saved as `cardPadding`. |
| Border Width (px) | Numeric range control in the inspector. Range 0–4. block.json default: 1. Saved as `cardBorderWidth`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Lift on Hover | On/off toggle in the inspector. On by default. Saved as `hoverLift`. |
| Show Image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Image Height (px) | Numeric range control in the inspector. Range 60–400. block.json default: 160. Saved as `imageHeight`. |
| Show Tag | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showText`. |
| Show Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Wrapper Background | Color control in the inspector. Saved as `wrapperBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Tag Background | Color control in the inspector. block.json default: #ede9fe. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #6c3fb5. Saved as `tagColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Link | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-anim, data-card-gap, data-card-width, data-direction, data-fade, data-hover-lift, data-pause, data-reverse.
When this is the right block
- Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases — that is the job of Marquee Cards, not a generic content block.
- Use it when you need the editor control labeled “Tag / Category”, which exists on this block’s inspector.
- It matches pages about marquee, cards, scroll.
- 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 Marquee Cards block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Marquee Cards”. It sits under Effects. After insert, open Cards and set “Tag / Category”, “Heading”, “Description”, “Link URL”.
What makes Marquee Cards different from other Blockenberg blocks?
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases. Inspector labels on this block include “Tag / Category”, “Heading”, “Description”, “Link URL”.
Is the Marquee Cards Gutenberg block free?
Yes. Marquee Cards ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Marquee Cards 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: Cards, Scroll, Card Appearance, Image).
Related effects blocks
Sticky Scroll
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels.
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.
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Marquee Cards from the Gutenberg inserter.