Article card - CSS Component ​

...

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

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

image ​

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

Image
Header

Article card content

tags ​

The Article Card component allow tags to be inserted.

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.

Article card content

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

Header

Action card content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/ArticleCard.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Tag.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Button.css" />
Code
html
<article z-article-card>
  <img src="/0.5.0/sample.webp" alt="Article card image" />
  <main>
    <div>
      <div z-tag>Tag text</div>
    </div>
    <header>Title</header>
    <p>Description</p>
    <button z-button="primary" icon="link:line">Link</button>
  </main>
</article>