List

Collection of records/items.

html

<div class="list-demo">
  <h3 class="list-demo__heading">Setup checklist</h3>
  
  
  <ol class="list list--divided list--comfortable" style="--accent:#D9C8F0;">
    <li class="list__item"><span class="list__index">1</span><span class="list__text">Create your workspace</span></li>
    <li class="list__item"><span class="list__index">2</span><span class="list__text">Invite your team</span></li>
    <li class="list__item"><span class="list__index">3</span><span class="list__text">Connect a data source</span></li>
    
  </ol>
  
</div>
<style>
.list-demo { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; padding: 20px; max-width: 340px; box-sizing: border-box; }
.list-demo__heading { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.list-demo__empty { margin: 0; padding: 24px 12px; text-align: center; font-size: 13px; color: #241430aa; border: 1.5px dashed #24143033; border-radius: 10px; }
.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; align-items: center; gap: 10px; padding: 12px 4px; }
.list--compact .list__item { padding: 6px 4px; font-size: 13px; }
.list--divided .list__item { border-bottom: 1px solid #24143020; }
.list--divided .list__item:last-child { border-bottom: none; }
.list--card .list__item { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(36,20,48,.08); }
.list--card.list--compact .list__item { padding: 8px 10px; margin-bottom: 6px; }
.list--card .list__item:last-child { margin-bottom: 0; }
.list__index { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #241430; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.list__text { font-size: 14px; }
</style>

tailwind

<div class="rounded-xl bg-[#FAF7F2] text-[#241430] p-5 max-w-[340px] box-border font-sans">
  <h3 class="m-0 mb-3 text-[15px] font-bold">Setup checklist</h3>
  
  
  <ol class="list-tw list-tw--divided list-tw--comfortable list-none m-0 p-0" style="--accent:#D9C8F0">
    <li class="list-tw__item flex items-center gap-2.5 py-3 px-1">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full text-[12px] font-bold flex-shrink-0 text-[#241430]" style="background:#D9C8F0">1</span>
      <span class="text-sm">Create your workspace</span>
    </li>
    <li class="list-tw__item flex items-center gap-2.5 py-3 px-1">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full text-[12px] font-bold flex-shrink-0 text-[#241430]" style="background:#D9C8F0">2</span>
      <span class="text-sm">Invite your team</span>
    </li>
    <li class="list-tw__item flex items-center gap-2.5 py-3 px-1">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full text-[12px] font-bold flex-shrink-0 text-[#241430]" style="background:#D9C8F0">3</span>
      <span class="text-sm">Connect a data source</span>
    </li>
    
  </ol>
  
</div>
<style>
.list-tw--compact .list-tw__item { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.list-tw--divided .list-tw__item { border-bottom: 1px solid #24143020; }
.list-tw--divided .list-tw__item:last-child { border-bottom: none; }
.list-tw--card .list-tw__item { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(36,20,48,.08); }
.list-tw--card.list-tw--compact .list-tw__item { padding: 8px 10px; margin-bottom: 6px; }
.list-tw--card .list-tw__item:last-child { margin-bottom: 0; }
</style>

react

export function ListDemo({
  heading = "Setup checklist",
  variant = "divided",
  density = "comfortable",
  empty = false,
  showExtra = false,
  accent = "#D9C8F0",
}) {
  const compact = density === "compact";
  const itemStyle = {
    display: "flex", alignItems: "center", gap: 10,
    padding: compact ? "6px 4px" : "12px 4px",
    fontSize: compact ? 13 : 14,
    borderBottom: variant === "divided" ? "1px solid #24143020" : "none",
    background: variant === "card" ? "#fff" : "transparent",
    borderRadius: variant === "card" ? 8 : 0,
    marginBottom: variant === "card" ? (compact ? 6 : 8) : 0,
    boxShadow: variant === "card" ? "0 2px 8px rgba(36,20,48,.08)" : "none",
  };
  const badge = { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "50%", background: accent, color: "#241430", fontSize: 12, fontWeight: 700, flexShrink: 0 };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430", background: "#FAF7F2", borderRadius: 12, padding: 20, maxWidth: 340, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      {empty ? (
        <p style={{ margin: 0, padding: "24px 12px", textAlign: "center", fontSize: 13, color: "#241430aa", border: "1.5px dashed #24143033", borderRadius: 10 }}>
          No items yet — check back soon.
        </p>
      ) : (
        <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
          <li style={itemStyle}><span style={badge}>1</span><span>Create your workspace</span></li>
          <li style={itemStyle}><span style={badge}>2</span><span>Invite your team</span></li>
          <li style={itemStyle}><span style={badge}>3</span><span>Connect a data source</span></li>
          {showExtra && (
            <li style={itemStyle}><span style={badge}>4</span><span>Publish your first report</span></li>
          )}
        </ol>
      )}
    </div>
  );
}