EventListItem 🟠 Not ready ​

The EventListItem component can be used imported from:

Playground ​

Construction ​

The CSS component uses the <li> tag with the z-event-list-item HTML custom attribute.

z-event-list-item ​

The z-event-list-item attribute is used to create a list item for an event. It is used to display the date and title of the event.

Date ​

The date of the event list item is displayed inside the <time> tag. Make sure you use a valid date format.

  • Welcome to ZDS

    Content goes here

    • Media ​

    You can insert an ImageComponent inside the event list item to display an image related to the event.

  • Image
    Welcome to ZDS

    Content goes here

    • You can also choose to insert a PictogramComponent inside the event list item to display a pictogram related to the event.

  • Welcome to ZDS

    Content goes here

    • You can use the <header> tag inside the <main> tag to display the title of the event.

    Button ​

    Lastly, you can insert a call to action Button inside the event list item to redirect the user to the event page.

    Browser support ​

    Detected engine:  

    • Chromium

    • Webkit

    • Gecko

    HTML Examples ​

    CodeSandbox example ​