Article card - Web Component
Browser support
Parameters
The Web component uses the <z-article-card> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
image-src | string | The image URL of the article card |
tags | string[] | The tags of the article card |
header | string | The title of the article card |
content | string | The content of the article card |
button-text | string | The link text of the article card |
button-icon | string | The link icon of the article card |
image-src
The image-src attribute is used to set the image of the article card.
tags
The tags attribute is used to set the tags of the article card.
header
The header attribute is used to set the header of the article card.
content
The content attribute is used to set the content of the article card.
button-text
The button-text attribute is used to set the text of the button.
button-icon
The button-icon attribute is used to set the icon of the button.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@zurich/web-components/article-card.js"></script>Code
html
<z-article-card header="Title" image-src="/0.3.10/sample.png" content="Description" tag="Tag text"
button-text="Link">
</z-article-card>