Attachment List

Files attached to an object/message.

Attachments

brief.docx240 KB
budget.xlsx88 KB
photo.jpg1.1 MB

html

<div class="attlist">
  <p class="attlist__label">Attachments</p>
  <ul class="attlist__items" data-count="3">
    <li class="attlist__item"><span class="attlist__icon" style="color:#BFD9F2;"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="attlist__name">brief.docx</span><span class="attlist__size">240 KB</span><button type="button" class="attlist__remove" aria-label="Remove brief.docx">&times;</button></li>
    <li class="attlist__item"><span class="attlist__icon" style="color:#BFD9F2;"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="attlist__name">budget.xlsx</span><span class="attlist__size">88 KB</span><button type="button" class="attlist__remove" aria-label="Remove budget.xlsx">&times;</button></li>
    <li class="attlist__item"><span class="attlist__icon" style="color:#BFD9F2;"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="attlist__name">photo.jpg</span><span class="attlist__size">1.1 MB</span><button type="button" class="attlist__remove" aria-label="Remove photo.jpg">&times;</button></li>
  </ul>
</div>
<style>
.attlist { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 14px 16px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; }
.attlist__label { margin: 0 0 8px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #24143099; }
.attlist__items { list-style: none; margin: 0; padding: 0; }
.attlist__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #24143012; }
.attlist__item:last-child { border-bottom: none; }
.attlist__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attlist__size { color: #24143088; font-size: 11px; }
.attlist__remove { border: none; background: none; cursor: pointer; color: #24143099; font-size: 15px; padding: 2px 6px; border-radius: 5px; }
.attlist__remove:hover, .attlist__remove:focus-visible { background: #24143010; }
.attlist__items[data-count="2"] .attlist__item:nth-child(n+3) { display: none; }
</style>

tailwind

<div class="w-[300px] p-[14px_16px] rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2]">
  <p class="m-0 mb-2 font-bold text-xs uppercase tracking-wide text-[#241430]/60">Attachments</p>
  <ul class="list-none m-0 p-0" data-count="3">
    <li class="attlist-tw-item flex items-center gap-2 py-1.5 border-b border-[#24143012]"><span style="color:#BFD9F2"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">brief.docx</span><span class="text-[#241430]/50 text-[11px]">240 KB</span><button type="button" class="border-none bg-none cursor-pointer text-[#241430]/60 text-[15px] px-1.5 py-0.5 rounded" aria-label="Remove brief.docx">&times;</button></li>
    <li class="attlist-tw-item flex items-center gap-2 py-1.5 border-b border-[#24143012]"><span style="color:#BFD9F2"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">budget.xlsx</span><span class="text-[#241430]/50 text-[11px]">88 KB</span><button type="button" class="border-none bg-none cursor-pointer text-[#241430]/60 text-[15px] px-1.5 py-0.5 rounded" aria-label="Remove budget.xlsx">&times;</button></li>
    <li class="attlist-tw-item flex items-center gap-2 py-1.5"><span style="color:#BFD9F2"><svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></span><span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">photo.jpg</span><span class="text-[#241430]/50 text-[11px]">1.1 MB</span><button type="button" class="border-none bg-none cursor-pointer text-[#241430]/60 text-[15px] px-1.5 py-0.5 rounded" aria-label="Remove photo.jpg">&times;</button></li>
  </ul>
</div>
<style>
ul[data-count="2"] .attlist-tw-item:nth-child(n+3) { display: none; }
</style>

react

export function AttachmentList({
  label = "Attachments",
  count = "3",
  showSize = true,
  removable = true,
  accent = "#BFD9F2",
}) {
  const files = [
    { name: "brief.docx", size: "240 KB" },
    { name: "budget.xlsx", size: "88 KB" },
    { name: "photo.jpg", size: "1.1 MB" },
  ].slice(0, Number(count));
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: "14px 16px", borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <p style={{ margin: "0 0 8px", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em", color: "#24143099" }}>{label}</p>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {files.map((f, i) => (
          <li key={f.name} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", borderBottom: i < files.length - 1 ? "1px solid #24143012" : "none" }}>
            <span style={{ color: accent, display: "flex" }}>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8V4a3 3 0 0 1 6 0v6a2 2 0 1 1-4 0V5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            </span>
            <span style={{ flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.name}</span>
            {showSize && <span style={{ color: "#24143088", fontSize: 11 }}>{f.size}</span>}
            {removable && <button type="button" aria-label={`Remove ${f.name}`} style={{ border: "none", background: "none", cursor: "pointer", color: "#24143099", fontSize: 15, padding: "2px 6px", borderRadius: 5 }}>&times;</button>}
          </li>
        ))}
      </ul>
    </div>
  );
}