Skip to content

Action card - Web Component

Browser support

Parameters

The Web component uses the <z-action-card> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
image-srcstringThe image URL of the action card
tagsstring[]The tags of the action card
headerstringThe title of the action card
contentstringThe content of the action card
button-textstringThe text of the button
button-iconstringThe icon of the button
action-iconstringThe icon of the action

The events emitted from the component are:

NamePayloadDescription
onactionEventFired when the user clicks the action icon

image-src

The image-src attribute is used to set the image of the action card.

tags

The tags attribute is used to set the tags of the action card.

The header attribute is used to set the header of the action card.

content

The content attribute is used to set the content of the action card.

Action card content

button-text

The button-text attribute is used to set the text of the button.

button-icon

The button-icon attribute is used to set the icon of the button.

action-icon

The action-icon attribute is used to set the icon of the action.

Playground

Customization

HTML Examples

Imports
html
<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@zurich/web-components/action-card.js"></script>
Code
html
<z-action-card header="Title" image-src="/0.3.10/sample.png" content="Description"
  button-text="Button"></z-action-card>