Action card - CSS Component ​

Browser support ​

Construction ​

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

z-action-card ​

The z-action-card parameter is the main parameter used to render the action card component.

INFO

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

Header

Action card content

action-icon ​

Test image
Header

Action card content

image ​

Test image
Header

Action card content

button ​

Header

Action card content

tags ​

tag
color
Header

Action card content

action ​

Header

Action card content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/ActionCard.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Tag.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Button.css" />
Code
html
<div>
  <article z-action-card>
    <button z-button="link" icon="edit:outline"></button>
    <img src="/0.3.7/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>