Nested List

Hierarchical list.

html

<div class="nl nl--indent" style="--accent:#A8E6C1;--indent:18px;">
  <h3 class="nl__heading">Project files</h3>
  <ul class="nl__list">
    <li>Design
      <ul class="nl__list">
        <li>Wireframes
          
          <ul class="nl__list"><li>v1-draft.fig</li><li>v2-review.fig</li></ul>
          
        </li>
        <li>Illustrations</li>
      </ul>
    </li>
    <li>Engineering
      <ul class="nl__list">
        <li>API spec</li>
      </ul>
    </li>
  </ul>
</div>
<style>
.nl { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 300px; width: 300px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.nl__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.nl__list { list-style: none; margin: 0; padding: 0 0 0 var(--indent); }
.nl > .nl__list { padding-left: 0; }
.nl__list li { padding: 4px 0; position: relative; }
.nl--guides .nl__list { border-left: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.nl--guides .nl__list li::before { content: ""; position: absolute; left: calc(var(--indent) * -1 + 6px); top: 13px; width: 8px; height: 1.5px; background: var(--accent); }
.nl--boxed .nl__list { border: 1px solid #24143020; border-radius: 8px; padding: 6px 6px 6px var(--indent); margin-top: 4px; }
</style>

tailwind

<div class="nl-tw nl-tw--indent font-sans text-sm leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[300px] w-[300px] p-4 rounded-xl box-border" style="--accent:#A8E6C1;--indent:18px;">
  <h3 class="m-0 mb-2.5 text-[15px] font-bold">Project files</h3>
  <ul class="list-none m-0 p-0">
    <li class="py-1">Design
      <ul class="nl-tw__list list-none m-0" style="padding-left:18px">
        <li class="py-1">Wireframes
          
          <ul class="nl-tw__list list-none m-0" style="padding-left:18px"><li class="py-1">v1-draft.fig</li><li class="py-1">v2-review.fig</li></ul>
          
        </li>
        <li class="py-1">Illustrations</li>
      </ul>
    </li>
    <li class="py-1">Engineering
      <ul class="nl-tw__list list-none m-0" style="padding-left:18px">
        <li class="py-1">API spec</li>
      </ul>
    </li>
  </ul>
</div>
<style>
.nl-tw--guides .nl-tw__list { border-left: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.nl-tw--boxed .nl-tw__list { border: 1px solid #24143020; border-radius: 8px; padding-top: 6px; padding-bottom: 6px; margin-top: 4px; }
</style>

react

export function NestedList({
  heading = "Project files",
  connector = "indent",
  accent = "#A8E6C1",
  showDepthThree = true,
  indentSize = 18,
}) {
  const nestedStyle = {
    listStyle: "none", margin: 0, paddingLeft: indentSize,
    borderLeft: connector === "guides" ? `1.5px solid ${accent}` : "none",
    border: connector === "boxed" ? "1px solid #24143020" : undefined,
    borderRadius: connector === "boxed" ? 8 : undefined,
    padding: connector === "boxed" ? `6px 6px 6px ${indentSize}px` : undefined,
    marginTop: connector === "boxed" ? 4 : undefined,
  };
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430", background: "#FAF7F2", maxWidth: 300, width: 300, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        <li style={{ padding: "4px 0" }}>Design
          <ul style={nestedStyle}>
            <li style={{ padding: "4px 0" }}>Wireframes
              {showDepthThree && (
                <ul style={nestedStyle}>
                  <li style={{ padding: "4px 0" }}>v1-draft.fig</li>
                  <li style={{ padding: "4px 0" }}>v2-review.fig</li>
                </ul>
              )}
            </li>
            <li style={{ padding: "4px 0" }}>Illustrations</li>
          </ul>
        </li>
        <li style={{ padding: "4px 0" }}>Engineering
          <ul style={nestedStyle}>
            <li style={{ padding: "4px 0" }}>API spec</li>
          </ul>
        </li>
      </ul>
    </div>
  );
}