Article card - Web Component

...

Browser support

Parameters

The Web component uses a <z-article-card> tag.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
config	string	Custom attribute for the article card component
header	string	The title of the article card
image-src	string	The image URL of the article card
content	string	The content of the article card
button-text	string	The link text of the article card

INFO

Check the z-article-card anatomy. Use the Playground to see how you can customize this component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/article-card.js"></script>

Code

<z-article-card header="Title" image-src="/0.3.7/sample.png" content="Description" tag="Tag text"
  button-text="Link">
</z-article-card>