Skip to content

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:

NameTypeDescriptionSlotA11y
image-srcstringThe image URL of the action cardimage
pictogramstringThe pictogram of the action card
pre-linestringThe line above the header where some text can be displayedpre-line
tagsstring[]The tags of the action cardpre-line
headerstringThe title of the action cardheader
contentstringThe content of the action carddefault
button-textstringThe text of the button
button-iconstringThe icon of the button
action-iconstringThe icon of the action
wideboolean

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
actionvoidFired when the user clicks the action icon
clickMouseEventFired when the user clicks the action card buttons

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanThe content of the action card
pre-linespanThe line above the header where some text or tags can be displayed
headerspanThe header of the action card
actionsspanThe actions of the action card

Parameters use

content

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

Action card content

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

We can also use the header slot:

Header text Action card content

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:

Tag 1Tag 2
Action card content

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:

VisitSave

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

HTML Examples

CodeSandbox example