---
title: Card
slug: docs/card
docTags: 
createdAt: 2024-11-19T16:46:36.814Z
---

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](docId\:jFoTWrzZsEzTmiaHtiSMJ). Can link a screen via button or as a whole clickable component.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/UBhHmKHPDr_rztng45FSx_image.png "Card example in Luma")



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/9w3I5N84ey4aKA-4PhY60_image.png "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