Article card - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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 | Slot |
|---|---|---|---|
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 | header |
content | string | The content of the article card | default |
button-text | string | The link text of the article card | |
button-icon | string | The link icon of the article card |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | |
pre-line | span | |
header | span |
image-src
The image-src parameter is used to define the image URL to be displayed inside article card.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
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.5.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.2/@zurich/web-components/article-card.js"></script>Code
html
<z-article-card header="Title" image-src="/0.5.2/sample.webp" content="Description" tag="Tag text"
button-text="Link">
</z-article-card>