Card ​

...

Browser support ​

...

Parameters ​

The CSS component uses a <div> tag with the z-card HTML custom attribute.

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

NameTypeDescription
z-cardstring

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.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Card.css" />
Code
html
<article z-card="flex" 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.
</article>