Action card

...

Browser support

...

Parameters

The CSS component uses an <article> tag with the z-action-card HTML custom attribute.

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

Name	Type	Description
z-action-card	string	Custom attribute for the action card component

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.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/ActionCard.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Button.css" />

Code

<div>
  <article z-action-card>
    <button>
      <i z-icon="edit:outline"></i>
    </button>
    <img src="/0.3.3-rc.2/sample.png" alt="Action card image" />
    <main>
      <!-- <div>
      <div z-tag="default">
    </div>   -->
      <h3>Title</h3>
      <p>Description</p>
    </main>
    <button z-button="primary">Button</button>
  </article>
</div>
<div>
</div>