Skip to content

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>

slim

The first modifier is used to remove the padding of the card.

Lorem ipsum dolor sit amet
display

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

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example