List Divider

Separator between items.

html

<div class="ld ld--labelled" style="--accent:#241430;--spacing:10px;">
  <ul class="ld__list">
    <li>Stand-up notes</li>
    <li>Design review</li>
    <li role="separator" aria-orientation="horizontal" class="ld__divider"><span class="ld__divider-label">Yesterday</span></li>
    <li>Sprint planning</li>
    <li>Retro summary</li>
    
    <li role="separator" aria-orientation="horizontal" class="ld__divider"><span class="ld__divider-label">Last week</span></li>
    <li>Kickoff notes</li>
    
  </ul>
</div>
<style>
.ld { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 300px; width: 300px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.ld__list { list-style: none; margin: 0; padding: 0; }
.ld__list li:not(.ld__divider) { padding: 8px 4px; }
.ld__divider { display: flex; align-items: center; margin: var(--spacing) 0; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ld--line .ld__divider-label { display: none; }
.ld__divider::before, .ld__divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.ld--labelled .ld__divider-label { padding: 0 8px; }
.ld--spaced .ld__divider { margin: calc(var(--spacing) * 2) 0; }
</style>

tailwind

<div class="ld-tw ld-tw--labelled font-sans text-sm text-[#241430] bg-[#FAF7F2] max-w-[300px] w-[300px] p-4 rounded-xl box-border" style="--accent:#241430;--spacing:10px;">
  <ul class="list-none m-0 p-0">
    <li class="py-2 px-1">Stand-up notes</li>
    <li class="py-2 px-1">Design review</li>
    <li role="separator" aria-orientation="horizontal" class="ld-tw__divider flex items-center text-xs font-bold uppercase tracking-wide" style="margin:10px 0;color:#241430"><span class="ld-tw__divider-label px-2">Yesterday</span></li>
    <li class="py-2 px-1">Sprint planning</li>
    <li class="py-2 px-1">Retro summary</li>
    
    <li role="separator" aria-orientation="horizontal" class="ld-tw__divider flex items-center text-xs font-bold uppercase tracking-wide" style="margin:10px 0;color:#241430"><span class="ld-tw__divider-label px-2">Last week</span></li>
    <li class="py-2 px-1">Kickoff notes</li>
    
  </ul>
</div>
<style>
.ld-tw--line .ld-tw__divider-label { display: none; }
.ld-tw__divider::before, .ld-tw__divider::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, currentColor 35%, transparent); }
.ld-tw--spaced .ld-tw__divider { margin-top: calc(var(--spacing) * 2) !important; margin-bottom: calc(var(--spacing) * 2) !important; }
</style>

react

export function ListDivider({
  label = "Yesterday",
  style = "labelled",
  accent = "#241430",
  showSecondLabel = true,
  spacing = 10,
}) {
  const gap = style === "spaced" ? spacing * 2 : spacing;
  const Divider = ({ text }) => (
    <li role="separator" aria-orientation="horizontal" style={{ display: "flex", alignItems: "center", margin: `${gap}px 0`, color: accent, fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em" }}>
      <span style={{ flex: 1, height: 1, background: accent, opacity: 0.35 }} />
      {style !== "line" && <span style={{ padding: "0 8px" }}>{text}</span>}
      <span style={{ flex: 1, height: 1, background: accent, opacity: 0.35 }} />
    </li>
  );
  const itemStyle = { padding: "8px 4px" };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", maxWidth: 300, width: 300, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        <li style={itemStyle}>Stand-up notes</li>
        <li style={itemStyle}>Design review</li>
        <Divider text={label} />
        <li style={itemStyle}>Sprint planning</li>
        <li style={itemStyle}>Retro summary</li>
        {showSecondLabel && (
          <>
            <Divider text="Last week" />
            <li style={itemStyle}>Kickoff notes</li>
          </>
        )}
      </ul>
    </div>
  );
}