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:

Name	Type	Description	Slot	A11y
config	string	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
clickable	boolean	Whether the card is clickable or not.

Events

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

Name	Payload	Description
click	void

Slots

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

Name	Tags	Description
default	span	Slot 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

Flags

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