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

  1. Open the page or post in the block editor.
  2. Click + (Block Inserter) and search for Card — it is in the Moduly category.
  3. 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.
  4. Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.

Settings

General

SettingWhat you can set
Button linkText

Image and badge

SettingWhat you can set
Alt textText
Image sizemedium, medium large, large or full
Image positiontop, bottom, left, right or overlay
Image width (%)20–70
Card height (px)200–1000
Text positiontop, middle or bottom
BadgeText
Badge iconstar, bolt, fire, tag or heart
Badge positiontop left, top center, top right, bottom left, bottom center, bottom right or ribbon
BadgeColour

Text

SettingWhat you can set
Title tagh2, h3, h4, h5, p or div
Alignmentleft, center or right
Padding (px)0–80
TextText
SettingWhat you can set
Open in a new tabOn / off
Add rel="nofollow"On / off
Button stylesolid, outline or link
Button iconarrow, chevron, external, download or plus
Icon sideafter or before
Button alignmentleft, center, right or stretch
Pin the button to the bottomOn / off
Link the title tooOn / off
Link the image tooOn / off
Link the whole cardText
Open the card link in a new tabOn / off
Card link name for screen readersText

Hover

SettingWhat you can set
Card on hovernone, lift, grow, sink, shine or line
Image on hovernone, zoom in, zoom out, pan, rotate, grayscale or blur
Shade the image on hoverOn / off
Corners (px)0–60
ShadowOn / off
Accent (button, eyebrow)Colour
CardColour
TitleColour
EyebrowColour
Badge textColour
Shade on the imageText
BorderColour

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.