Action card content
Skip to content 
Header Header
Header Header
Header
Header
Header
Action card - CSS Component
The ActionCard component can be used imported from:
Playground
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.
Code
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
Action card content
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
Browser support
Detected engine:
Chromium
Webkit
Gecko