Action card - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

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.

media ​

Inserting an Image component tag inside the z-action-card tag will render a round image.

You can also choose to insert a Pictogram component tag inside the z-action-card tag.

Test image
Header

Action card content

Header

Action card content

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.

Pre-line text
Header

Action card content

tag
color
Header

Action card content

title ​

You can add a title to the action card inserting a header tag inside the main tag.

Header
description ​

Also, using a p tag inside the main tag, you can add a description to the action card.

Action card content

button ​

Action Cards allows a call to action button to be inserted. Make sure to use the Button component tag.

Header

Action card content

action ​

You can also add an action button to the action card. Make sure to use the Button component tag.

Header

Action card content

Playground ​

Customization ​

HTML Examples ​

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