File Card

Compact file representation.

html

<div class="fcard" data-kind="Document">
  <span class="fcard__icon" style="background:#BFD9F2;"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2h7l4 4v12H5V2Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M12 2v4h4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></span>
  <div class="fcard__body">
    <p class="fcard__name">Q3-report.pdf</p>
    <p class="fcard__meta">Document &middot; 2.4 MB</p>
  </div>
  <button type="button" class="fcard__more" aria-label="More actions for Q3-report.pdf">&#8942;</button>
</div>
<style>
.fcard { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 12px 14px; border-radius: 10px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; border: 1px solid #24143018; }
.fcard__icon { flex: none; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #14351f; }
.fcard__body { flex: 1 1 auto; min-width: 0; }
.fcard__name { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard__meta { margin: 2px 0 0; font-size: 12px; color: #24143099; }
.fcard__more { flex: none; border: none; background: none; cursor: pointer; font-size: 16px; color: #24143099; padding: 4px 8px; border-radius: 6px; }
.fcard__more:focus-visible, .fcard__more:hover { background: #24143010; }
</style>

tailwind

<div class="flex items-center gap-3 w-[300px] p-[12px_14px] rounded-[10px] box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]" data-kind="Document">
  <span class="flex-none w-9 h-9 rounded-lg flex items-center justify-center text-[#14351f]" style="background:#BFD9F2"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2h7l4 4v12H5V2Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M12 2v4h4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></span>
  <div class="flex-1 min-w-0">
    <p class="m-0 font-bold overflow-hidden text-ellipsis whitespace-nowrap">Q3-report.pdf</p>
    <p class="mt-0.5 mb-0 text-xs text-[#241430]/60">Document &middot; 2.4 MB</p>
  </div>
  <button type="button" class="flex-none border-none bg-none cursor-pointer text-base text-[#241430]/60 px-2 py-1 rounded-md hover:bg-[#24143010]" aria-label="More actions for Q3-report.pdf">&#8942;</button>
</div>

react

export function FileCard({
  name = "Q3-report.pdf",
  size = "2.4 MB",
  kind = "Document",
  showActions = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: "12px 14px", borderRadius: 10, boxSizing: "border-box", display: "flex", alignItems: "center", gap: 12, border: "1px solid #24143018" }}>
      <span style={{ flex: "none", width: 36, height: 36, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", color: "#14351f", background: accent }}>
        <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2h7l4 4v12H5V2Z" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /><path d="M12 2v4h4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /></svg>
      </span>
      <div style={{ flex: "1 1 auto", minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name}</p>
        <p style={{ margin: "2px 0 0", fontSize: 12, color: "#24143099" }}>{kind} &middot; {size}</p>
      </div>
      {showActions && <button type="button" aria-label={`More actions for ${name}`} style={{ flex: "none", border: "none", background: "none", cursor: "pointer", fontSize: 16, color: "#24143099", padding: "4px 8px", borderRadius: 6 }}>&#8942;</button>}
    </div>
  );
}