Action card - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-action-card> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
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 | pre-line |
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 |
|---|---|---|
action | void | Fired when the user clicks the action icon |
click | MouseEvent | Fired when the user clicks the action card buttons |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | The content of the action card |
pre-line | span | The line above the header where some text or tags can be displayed |
header | span | The header of the action card |
actions | span | The actions of the action card |
content
The content attribute is used to set the content of the action card.
header
The header attribute is used to set the header of the action card.
We can also use the header slot:
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.
Alternatively, we can use the pre-line slot:
Button / actions
The button-text attribute is used to set the text of the button and the button-icon attribute is used to set the icon of the button.
Alternately, we can use the actions slot for more control or extra options:
action-icon
The action-icon attribute is used to set the icon of the action.
Attention!
Do not confuse action-icon with slot="actions". The action-icon is used to set the icon of the action on the top-right corner of the card, while the slot="actions" is used to add custom actions inside the card.