Skip to content

Action card - CSS Component โ€‹

Playground โ€‹

Customization โ€‹

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.

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

Browser support โ€‹

Detected engine: ย 

  • Chromium

  • Webkit

  • Gecko

HTML Examples โ€‹

CodeSandbox example โ€‹