Card - CSS Component ​

...

Browser support ​

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.

Lorem ipsum dolor sit amet

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.
Lorem ipsum dolor sit amet
  • The second modifier is display modifier is used to change the display of the card to flex. The default value is grid.
Lorem ipsum dolor sit amet

clickable ​

The clickable parameter is used to make the card clickable.

Lorem ipsum dolor sit amet

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:

Lorem ipsum dolor sit amet

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@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>