List Footer

Supporting list content.

html

<div class="lf-wrap">
  <ul class="lf-list">
    <li>Quarterly report.pdf</li>
    <li>Design specs.fig</li>
    <li>Roadmap notes.docx</li>
  </ul>
  <footer class="lf-footer lf-footer--bar" style="--accent:#A8E6C1;">
    <p class="lf-footer__summary">Showing 5 of 128 items</p>
    <button type="button" class="lf-footer__action">Load more</button>
  </footer>
</div>
<style>
.lf-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; max-width: 360px; background: #FAF7F2; border-radius: 12px; overflow: hidden; border: 1px solid #24143020; }
.lf-list { list-style: none; margin: 0; padding: 0; }
.lf-list li { padding: 10px 16px; border-bottom: 1px solid #24143014; }
.lf-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.lf-footer--bar { background: var(--accent); }
.lf-footer--minimal { background: transparent; }
.lf-footer--bordered { background: transparent; border-top: 2px solid var(--accent); }
.lf-footer__summary { margin: 0; font-size: 12px; color: #24143099; }
.lf-footer--bar .lf-footer__summary { color: #241430cc; }
.lf-footer__action { border: 1.5px solid var(--accent); background: #FAF7F2; color: #241430; padding: 6px 12px; border-radius: 8px; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.lf-footer__action:hover { background: var(--accent); }
.lf-footer__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="max-w-[360px] font-sans text-sm text-[#241430] bg-[#FAF7F2] rounded-xl overflow-hidden border border-[#24143020]">
  <ul class="list-none m-0 p-0">
    <li class="px-4 py-2.5 border-b border-[#24143014]">Quarterly report.pdf</li>
    <li class="px-4 py-2.5 border-b border-[#24143014]">Design specs.fig</li>
    <li class="px-4 py-2.5 border-b border-[#24143014]">Roadmap notes.docx</li>
  </ul>
  <footer class="lf-tw lf-tw--bar flex items-center justify-between gap-3 px-4 py-3" style="--accent:#A8E6C1">
    <p class="m-0 text-xs text-[#24143099]">Showing 5 of 128 items</p>
    <button type="button" class="border-[1.5px] bg-[#FAF7F2] text-[#241430] px-3 py-1.5 rounded-lg text-xs font-semibold" style="border-color:#A8E6C1">Load more</button>
  </footer>
</div>
<style>
.lf-tw--bar { background: var(--accent); }
.lf-tw--bordered { border-top: 2px solid var(--accent); }
</style>

react

export function ListFooter({
  summary = "Showing 5 of 128 items",
  actionLabel = "Load more",
  style = "bar",
  accent = "#A8E6C1",
  showAction = true,
}) {
  const footerStyle = {
    bar: { background: accent },
    minimal: { background: "transparent" },
    bordered: { background: "transparent", borderTop: `2px solid ${accent}` },
  }[style] ?? {};
  return (
    <div style={{ maxWidth: 360, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", borderRadius: 12, overflow: "hidden", border: "1px solid #24143020" }}>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        <li style={{ padding: "10px 16px", borderBottom: "1px solid #24143014" }}>Quarterly report.pdf</li>
        <li style={{ padding: "10px 16px", borderBottom: "1px solid #24143014" }}>Design specs.fig</li>
        <li style={{ padding: "10px 16px", borderBottom: "1px solid #24143014" }}>Roadmap notes.docx</li>
      </ul>
      <footer style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 16px", ...footerStyle }}>
        <p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>{summary}</p>
        {showAction && (
          <button type="button" style={{ border: `1.5px solid ${accent}`, background: "#FAF7F2", color: "#241430", padding: "6px 12px", borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: "pointer" }}>
            {actionLabel}
          </button>
        )}
      </footer>
    </div>
  );
}