Card - Web Component ​

Browser support ​

Parameters ​

The Web component uses the <z-card> tag:

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

NameTypeDescription
configstring

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
clickablebooleanWhether the card is clickable or not.

config ​

The config attribute is used to set the padding and display of the card.

Lorem ipsum dolor sit amet
  • The first modifier is used to remove the padding of the card. Setting slim as a value will remove the padding.
Lorem ipsum dolor sit amet
  • The second modifier is used to set the display of the card. Setting display as a value will set the display.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

clickable ​

The clickable attribute is used to make the card clickable.

Lorem ipsum dolor sit amet

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@zurich/web-components/card.js"></script>
Code
html
<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>