Card

4 min

Component for rendering a card with image and text block with title, subtitle and/or small pre-title (kicker) on the top, as well as optional action button. Allows HTML and Dynamic values in components. Can link a screen via button or as a whole clickable component.

Card example in Luma

Card example in Bodea

Properties

General

Image - background image
Link to - link to a page to open on card click
Open as product page (optional) - if you select Product template page in a Link to, select which product should be displayed on the product site.
Layout - choose card variant, image and text position: image on top, image on the left, image on the right, image partially overlayed, image fully overlayed
Title size - pick the heading size
Selectable - whether the can be visually 'selected'. Needs custom styles.

Texts

Title - content for main title
Subtitle - content for subtitle
Pre-title - content for small kicker (pre-title) above the title

Button appearance

Label - text to be displayed on the button
Variant - visual variant

Button actions

Link to - screen to navigate to on click
Open as product page (optional) - if you select Product template page in a Link to, select which product should be displayed on the product site.
Event Type - name (type) of event to generate on click. Used to trigger Data Collection Tag Property Rules. Leave empty for no event.
Webhook URL - URL to which a request should be sent on click. Leave empty for no request.
Form Id - used to filter properties to include in webhook request payload.
Custom Data - additional properties to add to dataLayer/request payload on click.
Toast Variant - type of toast that will be displayed on button click
Toast message - message that will be displayed in toast after button click

Alignment

Alignment - horizontal alignment of whole component
Vertical alignment - vertical alignment settings

Custom styles