Content · Gutenberg
Info Cards block for WordPress
Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles.
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
Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles.
Inspector panels on this block: Cards, Style & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Card style” options: Icon top (flat), Icon top (card), Icon left (inline), Accent left border, Dark card; “Icon style” options: Circle bg, Square bg, Plain emoji; “Text align” options: Left, Center.
Info Cards 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 → Content → search “Info Cards” (block name `blockenberg/info-cards` in block.json). Style it in the sidebar after insert.
How to use Info Cards block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Info Cards”, insert it. Category: Content.
- 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. |
| Card style | Select control; the chosen value is saved on the block. Options: Icon top (flat); Icon top (card); Icon left (inline); Accent left border; Dark card. block.json default: icon-top. Saved as `cardStyle`. |
| Icon style | Select control; the chosen value is saved on the block. Options: Circle bg; Square bg; Plain emoji. block.json default: circle-bg. Saved as `iconStyle`. |
| Text align | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: left. Saved as `textAlign`. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 4. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 8–72. block.json default: 24. Saved as `gap`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `cardPadding`. |
| Icon size (px) | Numeric range control in the inspector. Range 16–64. block.json default: 32. Saved as `iconSize`. |
| Icon bg size (px) | Numeric range control in the inspector. Range 32–100. block.json default: 64. Saved as `iconBgSize`. |
| Show CTA link | On/off toggle in the inspector. Off by default. Saved as `showCta`. |
| 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 `cardBorderColor`. |
| Colors — Title | Color control in the inspector. block.json default: #1e293b. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #64748b. Saved as `descColor`. |
When this is the right block
- Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles — that is the job of Info Cards, 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 features, info, cards.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Info Cards block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Info Cards”. It sits under Content. After insert, open Cards and set “Title”, “Description”, “CTA label”, “CTA URL”.
What makes Info Cards different from other Blockenberg blocks?
Flexible feature/info card grid with emoji or image icons, title, description, optional CTA and accent colors. Multiple card styles. Inspector labels on this block include “Title”, “Description”, “CTA label”, “CTA URL”.
Is the Info Cards Gutenberg block free?
Yes. Info Cards ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Info 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, Style & Layout).
Related content blocks
Filterable Cards
A grid of content cards filterable by category, with optional images, labels, descriptions and links.
Alert / Notice
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Callout
Highlighted panel for tips, warnings or success messages with icon, title and dismissible option.
Content Box
Styled content container with optional icon/emoji, badge label, title, rich body text, style variants (info/warning/success/tip/quote), border, background, and rounded corners.
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Image Text Rows
Multiple alternating image + text rows in one block. Perfect for feature descriptions, how-it-works sections, and product showcases.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Info Cards from the Gutenberg inserter.