Action card content
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.
image
โ
Inserting an Image component tag inside the z-action-card
tag will render a round image.
tags
โ
The Action Card component allow tags to be inserted.
tag
color
Action card content
title
โ
You can add a title to the action card inserting a header
tag inside the main
tag.
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.
Action card content
action
โ
You can also add an action button to the action card. Make sure to use the Button component tag.
Action card content
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/ActionCard.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Tag.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Button.css" />
Code
html
<div>
<article z-action-card>
<button z-button="link" icon="edit:line"></button>
<img src="/0.4.3/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>