Card - CSS Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component the <article>
tag with the z-card
HTML custom attribute.
z-card
The z-card
parameter is the main parameter used to render the card component.
There are two modifiers for the z-card
parameter, slim
and display
. The pattern would be: <?slim><:?display>
- The first modifier is used to remove the padding of the card.
- The second modifier is
display
modifier is used to change the display of the card toflex
. The default value isgrid
.
clickable
The clickable
parameter is used to make the card clickable.
Customization of the card
You can also customize the card with the following CSS properties:
--z-card--bg
: For the background color of the card.--z-card--color
: For the text color of the card.--z-card--radius
: For the border radius of the card.--z-card--padding
: For the padding of the card.--z-card--gap
: For the gap between cards.
For example:
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@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>