Attachment

File associated with content.

html

<div class="attachment" data-filetype="pdf" style="--accent:#A8E6C1;">
  <span class="attachment__icon" aria-hidden="true"></span>
  <div class="attachment__meta">
    <p class="attachment__name">Q3-roadmap.pdf</p>
    <p class="attachment__size">2.4 MB</p>
  </div>
  <button class="attachment__remove" type="button" aria-label="Remove attachment">×</button>
</div>
<style>
.attachment { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 14px; background: #FAF7F2; border: 1px solid #24143020; border-radius: 10px; font: 14px/1.4 system-ui, sans-serif; color: #241430; box-sizing: border-box; }
.attachment__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); flex-shrink: 0; position: relative; }
.attachment__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }
.attachment[data-filetype="pdf"] .attachment__icon::before { content: "PDF"; }
.attachment[data-filetype="image"] .attachment__icon::before { content: "IMG"; }
.attachment[data-filetype="spreadsheet"] .attachment__icon::before { content: "XLS"; }
.attachment[data-filetype="archive"] .attachment__icon::before { content: "ZIP"; }
.attachment__meta { flex: 1; min-width: 0; }
.attachment__name { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment__size { margin: 0; font-size: 12px; color: #24143080; }
.attachment__remove { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 4px; border-radius: 6px; }
.attachment__remove:hover { background: #24143010; }
.attachment__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div data-filetype="pdf" class="attachment-tw flex items-center gap-3 max-w-xs p-3 bg-[#FAF7F2] border border-[#24143020] rounded-lg font-sans text-sm text-[#241430] box-border" style="--accent:#A8E6C1">
  <span class="attachment-tw__icon w-9 h-9 rounded-lg flex-shrink-0 relative" style="background:#A8E6C1" aria-hidden="true"></span>
  <div class="flex-1 min-w-0">
    <p class="m-0 font-semibold truncate">Q3-roadmap.pdf</p>
    <p class="m-0 text-xs text-[#241430]/50">2.4 MB</p>
  </div>
  <button type="button" aria-label="Remove attachment" class="border-0 bg-transparent text-base leading-none cursor-pointer p-1 rounded-md hover:bg-[#24143010]">×</button>
</div>
<style>
.attachment-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }
.attachment-tw[data-filetype="pdf"] .attachment-tw__icon::before { content: "PDF"; }
.attachment-tw[data-filetype="image"] .attachment-tw__icon::before { content: "IMG"; }
.attachment-tw[data-filetype="spreadsheet"] .attachment-tw__icon::before { content: "XLS"; }
.attachment-tw[data-filetype="archive"] .attachment-tw__icon::before { content: "ZIP"; }
</style>

react

export function Attachment({
  fileName = "Q3-roadmap.pdf",
  fileType = "pdf",
  fileSize = "2.4 MB",
  accent = "#A8E6C1",
  removable = true,
}) {
  const label = { pdf: "PDF", image: "IMG", spreadsheet: "XLS", archive: "ZIP" }[fileType] ?? "FILE";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, maxWidth: 320, padding: "12px 14px", background: "#FAF7F2", border: "1px solid #24143020", borderRadius: 10, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", boxSizing: "border-box" }}>
      <span style={{ width: 36, height: 36, borderRadius: 8, background: accent, flexShrink: 0, display: "grid", placeItems: "center", color: "#FAF7F2", fontSize: 11, fontWeight: 700 }} aria-hidden="true">{label}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{fileName}</p>
        <p style={{ margin: 0, fontSize: 12, color: "#24143080" }}>{fileSize}</p>
      </div>
      {removable && (
        <button type="button" aria-label="Remove attachment" style={{ border: "none", background: "transparent", fontSize: 16, lineHeight: 1, cursor: "pointer", color: "#241430", padding: 4, borderRadius: 6 }}>×</button>
      )}
    </div>
  );
}