Article card โ
...
Browser support โ
...
Parameters โ
The CSS component uses an <article>
tag with the z-article-card
HTML custom attribute.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-article-card | string | Custom attribute for the article card component |
INFO
Check the z-article-card
anatomy. Use the Playground to see how you can customize this component.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/ArticleCard.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Tag.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Button.css" />
Code
html
<article z-article-card>
<img src="/0.3.3-rc.2/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>