Modules
Cards
Card grid modules for features, icons, and image callouts.
Cards
Description
Card modules present features or offers in multi-column grids. Variants cover large icon cards, image and text cards, and full-width image callouts.
How to edit
- Go to Elementor → Editor → Templates.
- Search for
Cards(or a word from the specific template name below). - Open the template and edit the content and widgets directly.
- Save, then check a page that uses the template.
Keep the wrapper and variant classes on the section so the layout styling continues to apply.
Variants
Card grids
| Template | What it is |
|---|---|
CK – Cards – Large icon – 3-col | Three icon cards in a row |
CK – Cards – Large icon – 3-col with featured card | Three cards with one highlighted as featured |
CK – Cards – Large icon – 2-col | Two icon cards in a row |
CK – Cards – Large icon – 4-col dark | Four icon cards on a maroon background |
CK – Cards – 2-3 col image-text | Two or three image cards in a row |
CK – Cards – full width-image | One full-width card with an image |
CK – Cards – full width-image callout | One full-width card with a main image and a top image |
Single card components
These are individual cards used inside other sections rather than whole grids:
| Template | What it is |
|---|---|
CK – Card – Featured | The featured card |
CK – Card – Post | Used for post listings |
2-3 col image-text
- This template takes two or three cards in a row. Adding more wraps them onto the next row.
- Each card has an image, title, description, and call-to-action button.
- Delete the subtitle or the button to match the style you want.
Full width-image
- This template takes one card in a row.
- The card has an image, title, description, and call-to-action button.
- The image sits on the right side of the card.
Full width-image callout
- This template takes one card in a row.
- The card has a main image, a top image, a title, and a description.
- The main image sits on the right side of the card.
Classes
Primary classes used by the cards component:
| Class | What it's for |
|---|---|
ck-cards | Main wrapper |
ck-cards__heading-container | Section heading and intro text |
ck-cards__grid | Card grid |
ck-cards__card | An individual card |
ck-cards__card-subheading | Card subheading |
ck-cards__card-featured | Featured card, used in CK – Cards – Large icon – 3-col with featured card |
ck-cards__ctas | Container for the action buttons |
Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.