Action card - Web Component

...

Browser support

Parameters

The Web component uses a <z-action-card> tag.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
config	string	Custom attribute for the action card component
header	string	The title of the action card
image-src	string	The image URL of the action card
content	string	The content of the action card
button-text	string	The text of the button

INFO

Check the z-action-card anatomy. Use the Playground to see how you can customize this component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/action-card.js"></script>

Code

<z-action-card header="Title" image-src="/0.3.7/sample.png" content="Description"
  button-text="Button"></z-action-card>