ListItem 🟠 Not ready ​

The ListItem component can be used imported from:

Playground ​

Construction ​

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

z-list-item ​

The z-list-item attribute is the main attribute used to render the list item CSS component.

Header & Content ​

You can use the <header> tag inside the <main> tag to display the title of the list item.

Also, using a p tag inside the main tag, you can add a description to the list item.

  • Header

    Content

    • Profile ​

    You can insert a Profile Component inside the list item to display a profile related to the item.

  • Header

    Content

    • Icons ​

    You can insert an Icon Component inside the list item to display an icon related to the item on the left or right side of the list item.

  • Header

    Content

    • Timestamp ​

    Finally you can insert a timestamp inside an <aside> tag to display a timestamp related to the item.

  • Header

    content

    • Browser support ​

    Detected engine:  

    • Chromium

    • Webkit

    • Gecko

    HTML Examples ​

    CodeSandbox example ​