Card - Web Component ​

The Card component can be used imported from:

Playground ​

Parameters ​

The Web component uses the <z-card> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescriptionSlotA11y
configstring

The main parameter has two components following the pattern: <?:slim><display>

  • slim: (optional) Removes the padding of the card
  • display: Possible values are: grid or flex
clickablebooleanWhether the card is clickable or not.

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
clickvoid

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanSlot for the card content

Parameters use ​

config ​

The config attribute is used to set the padding and display of the card.

Lorem ipsum dolor sit amet
  • The first modifier is used to remove the padding of the card. Setting slim as a value will remove the padding.
Lorem ipsum dolor sit amet
  • The second modifier is used to set the display of the card. Setting display as a value will set the display.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

clickable ​

The clickable attribute is used to make the card clickable.

Lorem ipsum dolor sit amet

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​