Action card - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-action-card> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot |
|---|---|---|---|
image-src | string | The image URL of the action card | |
pictogram | string | The pictogram of the action card | |
pre-line | string | The line above the header where some text can be displayed | pre-line |
tags | string[] | The tags of the action card | |
header | string | The title of the action card | header |
content | string | The content of the action card | default |
button-text | string | The text of the button | |
button-icon | string | The icon of the button | |
action-icon | string | The icon of the action |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onaction | void | Fired when the user clicks the action icon |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | |
pre-line | span | |
header | span |
image-src
The image-src parameter is used to define the image URL to be displayed inside action card.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
pictogram
The pictogram parameter is used to define the pictogram to be displayed inside action card. Make sure you specify correctly the name of the pictogram you want to display. Check the Pictogram component for the list of available pictograms.
If both image-src and pictogram are defined, the pictogram will be displayed.
pre-line & tags
The Action Card component allows to insert a pre-line before the header, you can ether add tags to the pre-line or add a text.
Attention!
If the tags attribute is used, the pre-line attribute will be ignored.
header
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.
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.