Effects · Gutenberg
Spotlight Card block for WordPress
Card with a radial gradient spotlight that follows the mouse cursor on hover.
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
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Inspector panels on this block: Content, Icon & Image, Badge & Link, Spotlight Effect, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Heading Tag” options: H2, H3, H4, H5, p.
Spotlight Card has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Effects → search “Spotlight Card” (block name `blockenberg/spotlight-card` in block.json). Style it in the sidebar after insert.
How to use Spotlight Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Spotlight Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Heading Tag”, “Show Icon”, “Dashicon Name”, “Icon Size (px)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Heading Tag | Select control; the chosen value is saved on the block. Options: H2; H3; H4; H5; p. block.json default: h3. Saved as `tag`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Dashicon Name | Text field in the inspector. block.json default: star-filled. Saved as `icon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 20–80. block.json default: 40. Saved as `iconSize`. |
| Show Image | On/off toggle in the inspector. Off by default. Saved as `showImage`. |
| Image Height (px) | Numeric range control in the inspector. Range 80–400. block.json default: 200. Saved as `imageHeight`. |
| Show Badge | On/off toggle in the inspector. Off by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. block.json default: NEW. Saved as `badgeText`. |
| Show Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Link Label | Text field in the inspector. block.json default: Learn more →. Saved as `linkLabel`. |
| Link URL | Text field in the inspector. block.json default: #. Saved as `linkUrl`. |
| Spotlight Size (px) | Numeric range control in the inspector. Range 100–700. block.json default: 350. Saved as `spotlightSize`. |
| Spotlight Opacity % | Numeric range control in the inspector. Range 2–60. block.json default: 15. Saved as `spotlightOpacity`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 8–64. block.json default: 28. Saved as `cardPadding`. |
| Show Border | On/off toggle in the inspector. On by default. Saved as `showBorder`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–4. block.json default: 1. Saved as `borderWidth`. |
| Spotlight | Color control in the inspector. block.json default: #8b5cf6. Saved as `spotlightColor`. |
| Card Background | Color control in the inspector. block.json default: #1e1b2e. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #2d2a4a. Saved as `cardBorder`. |
| Heading | Color control in the inspector. block.json default: #f1f5f9. Saved as `headingColor`. |
| Body Text | Color control in the inspector. block.json default: #94a3b8. Saved as `textColor`. |
| Colors — Icon | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Link | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkColor`. |
| Badge Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
When this is the right block
- Card with a radial gradient spotlight that follows the mouse cursor on hover — that is the job of Spotlight Card, not a generic content block.
- Use it when you need the editor control labeled “Heading Tag”, which exists on this block’s inspector.
- It matches pages about spotlight, card, hover.
- 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 Spotlight Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Spotlight Card”. It sits under Effects. After insert, open Content and set “Heading Tag”, “Show Icon”, “Dashicon Name”, “Icon Size (px)”.
What makes Spotlight Card different from other Blockenberg blocks?
Card with a radial gradient spotlight that follows the mouse cursor on hover. Inspector labels on this block include “Heading Tag”, “Show Icon”, “Dashicon Name”, “Icon Size (px)”.
Is the Spotlight Card Gutenberg block free?
Yes. Spotlight Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Spotlight Card 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: Content, Icon & Image, Badge & Link, Spotlight Effect).
Related effects blocks
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Spotlight Card from the Gutenberg inserter.