Skip to content

Article card - Web Component

The ArticleCard component can be used imported from:

Playground

Parameters

...

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:

Article 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