ListItem 🟠 Not ready

The ListItem component can be used imported from:

Playground

Parameters

Slots

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

Name	Tags	Description
default	span	Description of the list item
header	span	Header of the list item
image-src	span	Slottable image
left-actions	span	Left actions of the list item
right-actions	span	Right actions of the list item

Parameters use

Check the documentation about how to use the parameters.

header

The header attribute is used to set the header of the list item.

Alternatively, you can use the header slot to display the header.

Item Header

content

The content attribute is used to set the content of the list item.

Also you can use the default slot to set the content of the list item.

Item description

timestamp

The timestamp attribute is used to set the timestamp of the list item.

icon-right

icon-left

The icon-right and icon-left attributes are used to set the icons of the list item.

Check the icon list here. This attributes will receive the name of the icon to be show. You can use both solid or line (outlined) version.

The following attributes are related to Profile component.

initials

The initials attribute is used to set the initials of the profile in the list item.

Image

image-src

The image-src attribute is used to set the image source of the profile in the list item.

pictogram

The pictogram parameter is used to define the pictogram to be displayed inside action card. Make sure you specify correctly the name of the pictogram you want to display. Check the Pictogram component for the list of available pictograms.

If both image-src and pictogram are defined, the pictogram will be displayed.

image-alt

The image-alt attribute is used to set the image alt of the profile in the list item.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

CodeSandbox example

Sorry, not available yet ☹️