Marketing · Gutenberg
Card CTA Grid block for WordPress
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
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 grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Inspector panels on this block: Cards, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “CTA target” options: Same tab, New tab; “Layout” options: Grid, Flex row; “Card style” options: Border, Shadow, Filled accent, Flat.
Card CTA Grid 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 → Marketing → search “Card CTA Grid” (block name `blockenberg/card-cta-grid` in block.json). Style it in the sidebar after insert.
How to use Card CTA Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Card CTA Grid”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Cards. Set “Title”, “Description”, “CTA label”, “CTA URL”.
- 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 |
|---|---|
| Title | Text field in the inspector. |
| Description | Text field in the inspector. |
| CTA label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
| CTA target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. |
| Layout | Select control; the chosen value is saved on the block. Options: Grid; Flex row. block.json default: grid. Saved as `layout`. |
| Card style | Select control; the chosen value is saved on the block. Options: Border; Shadow; Filled accent; Flat. block.json default: border. Saved as `cardStyle`. |
| Columns | Numeric range control in the inspector. Range 1–5. block.json default: 4. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 0–64. block.json default: 20. Saved as `gap`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–72. block.json default: 36. Saved as `iconSize`. |
| Show icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDesc`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 0. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 0. Saved as `paddingBottom`. |
| Section bg | Color control in the inspector. Saved as `sectionBg`. |
| Card bg | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Colors — Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #64748b. Saved as `descColor`. |
When this is the right block
- A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections — that is the job of Card CTA Grid, not a generic content block.
- Use it when you need the editor control labeled “Title”, which exists on this block’s inspector.
- It matches pages about cta, cards, grid.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Card CTA Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Card CTA Grid”. It sits under Marketing. After insert, open Cards and set “Title”, “Description”, “CTA label”, “CTA URL”.
What makes Card CTA Grid different from other Blockenberg blocks?
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections. Inspector labels on this block include “Title”, “Description”, “CTA label”, “CTA URL”.
Is the Card CTA Grid Gutenberg block free?
Yes. Card CTA Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Card CTA Grid 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, Layout).
Related marketing blocks
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
Feature Grid
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
Icon Feature Grid
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Card CTA Grid from the Gutenberg inserter.