Skip to content

Card ​

Cards are containers with a defined but flexible layout and are often used in groups to showcase collections of similar content, with each card conveying a single idea. Cards come with the option of being interactive, thus allowing users to perform an action or explore the card's topic in depth.

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-card--bgcolor
--z-card--colorcolor
--z-card--radiusdistance
--z-card--paddingdistance
--z-card--gapdistance
--z-card--shadowshadow
--z-card--borderdistance
--z-card--fontfont

Accessibility ​

...