Card - CSS Component ​

The Card component can be used imported from:

Playground ​

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

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​