Individual list record.
<ul class="li-demo-wrap">
<li class="li li--flat li--comfortable" style="--accent:#E8A020;">
<span class="li__avatar" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#241430" stroke-width="1.6"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 19.5c1.6-3.6 4.6-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>
</span>
<span class="li__body">
<span class="li__primary">Ava Martinez</span>
<span class="li__secondary">Product designer · online now</span>
</span>
<span class="li__trailing">
<span class="li__meta">2m ago</span>
<button class="li__action" type="button">View</button>
</span>
</li>
</ul>
<style>
.li-demo-wrap { list-style: none; margin: 0; padding: 0; font: 16px/1.5 system-ui, sans-serif; max-width: 380px; }
.li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #FAF7F2; color: #241430; box-sizing: border-box; }
.li--bordered { border: 1.5px solid #24143025; border-radius: 10px; }
.li--card { border-radius: 12px; box-shadow: 0 6px 18px rgba(36,20,48,.12); }
.li--compact { padding: 8px 12px; gap: 9px; }
.li__avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.li--compact .li__avatar { width: 30px; height: 30px; }
.li__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.li__primary { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li__secondary { font-size: 12.5px; color: #24143099; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li--compact .li__primary { font-size: 13px; }
.li--compact .li__secondary { font-size: 11.5px; }
.li__trailing { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.li__meta { font-size: 11.5px; color: #24143080; }
.li__action { font: 600 12px system-ui, sans-serif; padding: 4px 10px; border-radius: 6px; border: 1.5px solid var(--accent); background: transparent; color: #241430; cursor: pointer; }
.li__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style><ul class="list-none m-0 p-0 font-sans max-w-[380px]">
<li class="lit lit--flat lit--comfortable flex items-center gap-3 py-3.5 px-4 bg-[#FAF7F2] text-[#241430] box-border" style="--accent:#E8A020">
<span class="lit__avatar w-[38px] h-[38px] rounded-full grid place-items-center flex-shrink-0" style="background:#E8A020" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#241430" stroke-width="1.6"><circle cx="12" cy="8" r="3.4"/><path d="M4.5 19.5c1.6-3.6 4.6-5.4 7.5-5.4s5.9 1.8 7.5 5.4"/></svg>
</span>
<span class="flex-1 min-w-0 flex flex-col gap-0.5">
<span class="lit__primary block text-sm font-semibold whitespace-nowrap overflow-hidden text-ellipsis">Ava Martinez</span>
<span class="lit__secondary block text-[12.5px] text-[#241430]/60 whitespace-nowrap overflow-hidden text-ellipsis">Product designer · online now</span>
</span>
<span class="flex-shrink-0 flex flex-col items-end gap-1">
<span class="text-[11.5px] text-[#241430]/50">2m ago</span>
<button type="button" class="text-xs font-semibold px-2.5 py-1 rounded-md border-[1.5px] bg-transparent text-[#241430]" style="border-color:#E8A020">View</button>
</span>
</li>
</ul>
<style>
.lit--bordered { border: 1.5px solid #24143025 !important; border-radius: 10px !important; }
.lit--card { border-radius: 12px !important; box-shadow: 0 6px 18px rgba(36,20,48,.12) !important; }
.lit--compact { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 12px !important; padding-right: 12px !important; gap: 9px !important; }
.lit--compact .lit__avatar { width: 30px !important; height: 30px !important; }
.lit--compact .lit__primary { font-size: 13px !important; }
.lit--compact .lit__secondary { font-size: 11.5px !important; }
</style>export function ListItem({
primary = "Ava Martinez",
secondary = "Product designer · online now",
meta = "2m ago",
variant = "flat",
density = "comfortable",
accent = "#E8A020",
}) {
const compact = density === "compact";
const wrap = {
bordered: { border: "1.5px solid #24143025", borderRadius: 10 },
card: { borderRadius: 12, boxShadow: "0 6px 18px rgba(36,20,48,.12)" },
flat: {},
}[variant] ?? {};
return (
<ul style={{ listStyle: "none", margin: 0, padding: 0, fontFamily: "system-ui, sans-serif", maxWidth: 380 }}>
<li style={{ display: "flex", alignItems: "center", gap: compact ? 9 : 12,
padding: compact ? "8px 12px" : "14px 16px", background: "#FAF7F2", color: "#241430",
boxSizing: "border-box", ...wrap }}>
<span aria-hidden="true" style={{ flexShrink: 0, width: compact ? 30 : 38, height: compact ? 30 : 38,
borderRadius: "50%", background: accent, display: "grid", placeItems: "center" }}>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#241430" strokeWidth="1.6">
<circle cx="12" cy="8" r="3.4" />
<path d="M4.5 19.5c1.6-3.6 4.6-5.4 7.5-5.4s5.9 1.8 7.5 5.4" />
</svg>
</span>
<span style={{ flex: "1 1 auto", minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }}>
<span style={{ fontSize: compact ? 13 : 14, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{primary}</span>
<span style={{ fontSize: compact ? 11.5 : 12.5, color: "#24143099", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{secondary}</span>
</span>
<span style={{ flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
<span style={{ fontSize: 11.5, color: "#24143080" }}>{meta}</span>
<button type="button" style={{ font: "600 12px system-ui, sans-serif", padding: "4px 10px", borderRadius: 6, border: `1.5px solid ${accent}`, background: "transparent", color: "#241430", cursor: "pointer" }}>View</button>
</span>
</li>
</ul>
);
}