Article card - CSS Component ​

The ArticleCard component can be used imported from:

Playground ​

Construction ​

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

Content ​

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

Article card content

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

Header
Image ​

Inserting an Image component tag inside the z-article-card tag will render an image.

Code
Image
Header

Article card content

Tags & Pre-line ​

The Article 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
Header

Article card content

tag
color
Header

Action card content

Actions ​

You can add a link to the action card inserting a button tag inside the main tag.

Header

Action card content

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​