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:
Name | Type | Description |
---|---|---|
z-card | string | The main parameter has two components following the pattern:
|
clickable | boolean | Whether 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>