Skip to content

Event List Item

Content of the event list item

Implementations

The component EventListItem is available in the following technologies:

CSS Components
cssreactvue
Web Components
webreactvueangular

Parameters

Parameters

Make sure you have read about the parameters in here.

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

NameTypeSlotDescription
image-srcstring

The image-src is the URL of the image to be used.

image-altstring

Alternative text for image accessibility

pictogramstring
cross-originboolean

The crossorigin attribute of the image. Provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data.

localestring

The locale parameter is used to set the locale of the component. The value must be part of the registered locales in ZDS. If not set, the default locale of the document will be used.

Have a look to the localization mechanisms.

datestringThe date of the event
headerstringThe title of the event
contentstringThe content of the event
customobject

A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format.

Example:

html
<z-event-list-item custom='{"fill":"#06e7a3"}' />

Check the available values in the customization section.

custom-strstring

The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters.

Example:

html
<z-event-list-item custom-str="fill:#06e7a3" />
z-themestring

Sets the theme of the component. The possible values are light and dark.

html
<z-event-list-item z-theme="dark" />

From Figma to code

...

Customization

INFO

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

No customization tokens yet implemented for this component

Accessibility

...