ListItem

Structured list row with optional leading/trailing icons and multi-line content.

Open in Storybook

Interactive Demo

John Doe

john@example.com

Jane Smith

jane@example.com

Alex Brown

alex@example.com

Usage

<script setup>
import { ListItem } from '@yellowcard/b2b-design-system';
</script>

<template>
  <ListItem
    title="John Doe"
    subtitle="john@example.com"
    :clickable="true"
    @click="handleClick"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
title*	string	—	Primary text
subtitle	string	—	Secondary text line
subtitle2	string	—	Tertiary text line
size	string	—	Item size
type	string	—	Item type
leadingIcon	string	—	Left icon source
leadingIconAlt	string	—	Left icon alt text
trailingIcon	string	—	Right icon source
trailingIconAlt	string	—	Right icon alt text
hasLeadingIcon	boolean	false	Show leading icon
hasTrailingElement	boolean	false	Show trailing element
clickable	boolean	false	Enable click interaction
ariaLabel	string	—	Accessible label