Skip to main content

Card

Cards are surfaces that display content and actions on a single topic. They help group related information and make it easier to scan, compare, and take action.

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=2379-71025

Demo

zeta-web v0.11.0
Web Components

Storybook

https://design.zebra.com/web/storybook/index.html?path=/docs/components-cards--docs

Slots

NameDescriptionType
defaultThe content of the card.text

Inherited Attributes

NameDescriptionTypeDefaultInherited From
roundedWhether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none.boolean | undefinedtrueContourable

CSS Properties

NameDescription
--card-border-line-widthThe line width of the border
--card-border-colorThe color of the border
--card-border-line-styleThe line style of the border