Action card - Web Component
The ActionCard component can be used imported from:
Playground
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 | A11y |
|---|---|---|---|---|
image-src | string | The image URL of the action card | image | |
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 |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
action | void | Fired when the user clicks the action icon |
click | MouseEvent | Fired when the user clicks the action card buttons |
Slots
This component has slots. Check the documentation about how to use the slots.
| 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 |
Parameters use
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
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.
We can also use the image slot:
Action card content 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.
Browser support
Detected engine:
Chromium
Webkit
Gecko