Skip to content 
Action card content
Header text Action card content
Action card content
Tag 1 Tag 2 Action card content Visit Save
Action card - Web Component
The ActionCard component can be used imported from:
Playground
Parameters
...
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|
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 |
action-button | span | The main action button 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
We can use the actions slot for establishing custom actions inside the card:
Action icon
We can use the action-icon slot to set the button of the main action.
Browser support
Detected engine:
Chromium
Webkit
Gecko