Card
Present a service or item as a tidy clickable card.
A content card with an image, badge, eyebrow, title, text and button; hover effects and a whole-card link that keeps the button clickable.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Card — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
General
| Setting | What you can set |
|---|
| Button link | Text |
Image and badge
| Setting | What you can set |
|---|
| Alt text | Text |
| Image size | medium, medium large, large or full |
| Image position | top, bottom, left, right or overlay |
| Image width (%) | 20–70 |
| Card height (px) | 200–1000 |
| Text position | top, middle or bottom |
| Badge | Text |
| Badge icon | star, bolt, fire, tag or heart |
| Badge position | top left, top center, top right, bottom left, bottom center, bottom right or ribbon |
| Badge | Colour |
Text
| Setting | What you can set |
|---|
| Title tag | h2, h3, h4, h5, p or div |
| Alignment | left, center or right |
| Padding (px) | 0–80 |
| Text | Text |
| Setting | What you can set |
|---|
| Open in a new tab | On / off |
| Add rel="nofollow" | On / off |
| Button style | solid, outline or link |
| Button icon | arrow, chevron, external, download or plus |
| Icon side | after or before |
| Button alignment | left, center, right or stretch |
| Pin the button to the bottom | On / off |
| Link the title too | On / off |
| Link the image too | On / off |
| Link the whole card | Text |
| Open the card link in a new tab | On / off |
| Card link name for screen readers | Text |
Hover
| Setting | What you can set |
|---|
| Card on hover | none, lift, grow, sink, shine or line |
| Image on hover | none, zoom in, zoom out, pan, rotate, grayscale or blur |
| Shade the image on hover | On / off |
| Corners (px) | 0–60 |
| Shadow | On / off |
| Accent (button, eyebrow) | Colour |
| Card | Colour |
| Title | Colour |
| Eyebrow | Colour |
| Badge text | Colour |
| Shade on the image | Text |
| Border | Colour |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- The Elementor Card widget has the same buried-button bug with a card link. It isn't fixed there (not in scope).
- The text's paragraph size follows the theme's body text (large in TT5); the block has no font-size setting of its own.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Also available for Elementor (Card).
- Works well with: Advanced Accordion, Content Switcher, Feature List.