Card - Web Component

...

Browser support

Parameters

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

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

Name	Type	Description
config	string	The main parameter has two components following the pattern: <?:slim><display> slim: (optional) Removes the padding of the card display: Possible values are: grid or flex
clickable	boolean	Whether the card is clickable or not.

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/card.js"></script>

Code

<z-card config="grid" clickable>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
  sunt in culpa qui officia deserunt mollit anim id est laborum.
</z-card>