Item

shadow

Item components are blocks that can contain various types of content, including text, icons, avatars, images, inputs, and other standard or custom elements. Item elements are usually found inside List elements.

Basic usage

This example shows the most common wje-item shape: a single content row with the default spacing and without extra variants.

Separation lines

The lines attribute controls how the bottom separator of each item is rendered. This is useful when you need softer or stronger visual division inside a list.

Use with images

This example combines the item with media so it is clear how image or preview content sits next to text.

Use with buttons

This example adds actions to the item so you can see the recommended pattern for rows that also need quick controls.

Use with icons

This example focuses on icon placement inside an item and on keeping icons aligned with text and supporting content.

When to use

Use wje-item to improve readability, scannability, and contextual understanding of content.

When not to use

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices

• Compress media and use lazy loading in larger collections.
• Keep information priority consistent across cards/lists.
• Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties

No properties available for this component.

Events

No events available for this component.

Methods

isClickable

Description	Returns the CSS styles for the component.
Signature	() => boolean

CSS Shadow Parts

Name	Description
native	The native part.
inner	The inner part.

CSS Custom Properties

Name	Description
--wje-item-background	Sets the background color of the item. Accepts any valid CSS color value.
--wje-item-color	Defines the text color for the item. Accepts any valid CSS color value.
--wje-item-padding-start	Specifies the left padding of the item. Accepts any valid CSS length.
--wje-item-padding-end	Specifies the right padding of the item. Accepts any valid CSS length.
--wje-item-padding-top	Specifies the top padding of the item. Accepts any valid CSS length.
--wje-item-padding-bottom	Specifies the bottom padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-start	Specifies the left inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-end	Specifies the right inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-top	Specifies the top inner padding of the item. Accepts any valid CSS length.
--wje-item-inner-padding-bottom	Specifies the bottom inner padding of the item. Accepts any valid CSS length.
--wje-item-border-radius	Defines the border radius, providing rounded corners for the item.
--wje-item-border-width	Sets the border width of the item. Accepts any valid CSS length.
--wje-item-border-style	Specifies the style of the border, such as solid, dashed, or dotted.
--wje-item-border-color	Defines the color of the item's border. Accepts any valid CSS color value.
--wje-item-min-height	Sets the minimum height of the item to ensure consistent layout.
--wje-item-transition	Specifies the transition effects for the item, such as for hover or focus states.
--wje-item-inner-box-shadow	Adds a shadow effect inside the item for a 3D appearance.

Slots

Name	Description
start	The start slot.
end	The end slot.
error	The error slot.
helper	The helper slot.