Article card - CSS Component ​

...

Browser support ​

Construction ​

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

INFO

Check the z-article-card anatomy. Use the Playground to see how you can customize this component.

Header

Article card content

image ​

Test image
Header

Article card content

Header

Action card content

tags ​

tag
color
Header

Action card content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/ArticleCard.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Tag.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Button.css" />
Code
html
<article z-article-card>
  <img src="/0.3.7/sample.png" 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:outline">Link</button>
  </main>
</article>