Card
Card
A versatile content card supporting image, horizontal, bordered, and overlayed layout variants. Includes optional heading, body text, image, and call-to-action link. Cards can be stretched to make the entire surface clickable.
Examples
Image Card Title
This is an example of the default vertical image card layout with a title, body text, and call-to-action link.
Horizontal Card Title
This is an example of the horizontal image card layout where the image appears side-by-side with the card content.
Bordered Card Title
This is an example of the bordered card layout without an image, featuring a border and text content only.
Control Properties
| Parameter | Type | Description |
|---|---|---|
| CardType | Droplink | Sets the card layout type. Options: image (vertical with image on top), horizontal (side-by-side image and text), bordered (no image, border only), overlayed (text over image). Default: image. |
| StretchedLink | Checkbox | When enabled (default), the entire card surface becomes clickable via a stretched link. Set to 0 to disable. |
| LinkStyle | Droplink | Sets the CTA link style class. Options: btn btn-primary, btn btn-secondary, icon-link (arrow). Default: icon-link. |
| ButtonSize | Droplink | Sets the button size class. Options: btn-lg, btn-sm. Leave empty for default size. |
| HeadingSize | Droplink | Sets the heading element size class for the card title. Default: h4. |
| BorderColor | Droplink | Sets the Bootstrap border color utility class (e.g., border-primary, border-secondary). |
| TextColor | Droplink | Sets the Bootstrap text color utility class (e.g., text-primary, text-muted). |
| Column classes | Inherited | Small, Medium, Large, Offset column classes for responsive grid layout. |
Template Properties
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | The card heading text displayed in the card body. |
| Copy | Rich Text | The card body content displayed below the title. |
| Image | Image | The card image displayed at the top (image/overlayed types) or beside the content (horizontal type). Not shown for bordered type. |
| Link | General Link | The call-to-action link. Supports internal links, external URLs, media items, and anchors. The link text is displayed on the CTA button/link. |