Skip to content 
Article card content
Header text Article card content
Article card content Article card content 
Action card content
Tag 1 Tag 2 Article card content Visit Save
Article card - Web Component
The ArticleCard component can be used imported from:
Playground
Parameters
The Web component uses the <z-article-card> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
image-src | string | The image URL of the article card | image | |
tags | string[] | The tags of the article card | pre-line | |
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 | ||
wide | boolean |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | The content of the article card |
pre-line | span | The pre-line of the article card |
header | span | The header of the article card |
actions | span | The actions of the article card |
Parameters use
content
The content attribute is used to set the content of the article card or simply using the default slot.
header
The header attribute is used to set the header of the article card.
We can also use the header slot:
Image
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.
We can also use the image slot:
Action card content tags
The tags attribute is used to set the tags of the article card.
We can also use the pre-line slot:
Button / actions
The button-text attribute is used to set the text of the button and the button-icon attribute is used to set the icon of the button.
Alternately, we can use the actions slot for more control or extra options:
Browser support
Detected engine:
Chromium
Webkit
Gecko