Skip to content

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:

NameTypeDescriptionSlotA11y
image-srcstringThe image URL of the article cardimage
tagsstring[]The tags of the article cardpre-line
headerstringThe title of the article cardheader
contentstringThe content of the article carddefault
button-textstringThe link text of the article card
button-iconstringThe link icon of the article card
wideboolean

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanThe content of the article card
pre-linespanThe pre-line of the article card
headerspanThe header of the article card
actionsspanThe 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.

Article card content

The header attribute is used to set the header of the article card.

We can also use the header slot:

Header text Article card content

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.

Article card contentArticle card content

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:

Tag 1Tag 2 Article card content

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:

VisitSave

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example