BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Card Free

How to set up and style the Card widget in Elementor.

Card combines an image, a badge, a title, a description and a button in one box. Use it for services, offers, products or any item that needs a picture, a few words and a link.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag the Card widget into a column.

  2. In Card, choose the Image and the Image Size.

  3. Type the Badge, Title and Description. Clear the Badge if you do not need one.

  4. Choose a Link type: None, Button or Whole card. Then set the Button Text and URL.

  5. Set Image Position to Top or Left, and choose whether to keep Zoom Image on Hover.

  6. Set the Alignment.

  7. Open the Style tab to style the card, image, badge, text and button.

Content options

Card

Option What it does
Image The picture shown on the card. It supports dynamic tags.
Image Size The WordPress image size to load.
Badge A short label shown over the image. Leave it empty to hide it.
Title The card heading.
Title Tag The HTML tag used for the title. The default is H3.
Description The text under the title.
Link Chooses what is clickable: None, Button or Whole card.
Button Text The button label. Hidden when Link is set to None.
URL The address the button or card links to.
Image Position Places the image on top of the text or to its left.
Zoom Image on Hover Enlarges the image when a visitor hovers over the card.
Alignment Aligns the text and the button left, center or right, per device.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Card

    background color, border, border radius, box shadow, hover box shadow and content padding.

  • Image

    height, and for the left image position, the width of the image area from 20 to 70 percent.

  • Badge

    text color, typography and background. This section appears when the Badge field is filled in.

  • Title and Description

    color, typography and spacing for the title, and color and typography for the description.

  • Button

    typography, normal and hover colors for text, background and border, border width, border radius and padding. Hidden when Link is set to None.

Tips

  • The button needs a URL. If the URL is empty, no button is shown and the card is not linked.

  • With Whole card, the button is still shown but the entire card is one link.

  • If you remove the image, the badge moves into the text area above the title.

  • On screens narrower than 768 pixels, a card with the image on the left stacks with the image on top.

Questions and answers

Can I make the whole card clickable?

Yes. Set Link to Whole card and fill in the URL. The card becomes a single link.

Can I use the card without an image?

Yes. Remove the image and the card shows the badge, title, description and button only.

Can I put the image beside the text?

Yes. Set Image Position to Left. In the Style tab you can then set the image width.

How do I turn off the hover zoom?

Switch off Zoom Image on Hover in the Card section.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides