File Metadata

Information about a file.

Name
Q3-report.pdf
Size
2.4 MB
Modified
Owner
Priya Shah

html

<dl class="fmeta" style="border-top-color:#BFD9F2;">
  <div class="fmeta__row"><dt>Name</dt><dd>Q3-report.pdf</dd></div>
  <div class="fmeta__row"><dt>Size</dt><dd>2.4 MB</dd></div>
  <div class="fmeta__row"><dt>Modified</dt><dd><time datetime="2026-08-14">14 Aug 2026</time></dd></div>
  <div class="fmeta__row"><dt>Owner</dt><dd>Priya Shah</dd></div>
</dl>
<style>
.fmeta { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; padding: 16px 18px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; border-top: 3px solid; margin: 0; }
.fmeta__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #24143012; }
.fmeta__row:last-child { border-bottom: none; }
.fmeta dt { color: #24143099; font-weight: 600; }
.fmeta dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
</style>

tailwind

<dl class="w-[280px] p-[16px_18px] rounded-[10px] box-border border border-[#24143018] border-t-[3px] m-0 font-sans text-[13px] text-[#241430] bg-[#FAF7F2]" style="border-top-color:#BFD9F2">
  <div class="flex justify-between gap-2.5 py-1.5 border-b border-[#24143012]"><dt class="text-[#241430]/60 font-semibold">Name</dt><dd class="m-0 text-right overflow-hidden text-ellipsis whitespace-nowrap max-w-[160px]">Q3-report.pdf</dd></div>
  <div class="flex justify-between gap-2.5 py-1.5 border-b border-[#24143012]"><dt class="text-[#241430]/60 font-semibold">Size</dt><dd class="m-0 text-right">2.4 MB</dd></div>
  <div class="flex justify-between gap-2.5 py-1.5 border-b border-[#24143012]"><dt class="text-[#241430]/60 font-semibold">Modified</dt><dd class="m-0 text-right"><time datetime="2026-08-14">14 Aug 2026</time></dd></div>
  <div class="flex justify-between gap-2.5 py-1.5"><dt class="text-[#241430]/60 font-semibold">Owner</dt><dd class="m-0 text-right">Priya Shah</dd></div>
</dl>

react

export function FileMetadata({
  name = "Q3-report.pdf",
  size = "2.4 MB",
  modified = "14 Aug 2026",
  owner = "Priya Shah",
  accent = "#BFD9F2",
}) {
  const row = { display: "flex", justifyContent: "space-between", gap: 10, padding: "6px 0", borderBottom: "1px solid #24143012" };
  const label = { color: "#24143099", fontWeight: 600 };
  const value = { margin: 0, textAlign: "right", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 160 };
  return (
    <dl style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, padding: "16px 18px", borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018", borderTop: `3px solid ${accent}`, margin: 0 }}>
      <div style={row}><dt style={label}>Name</dt><dd style={value}>{name}</dd></div>
      <div style={row}><dt style={label}>Size</dt><dd style={value}>{size}</dd></div>
      <div style={row}><dt style={label}>Modified</dt><dd style={value}><time dateTime="2026-08-14">{modified}</time></dd></div>
      <div style={{ ...row, borderBottom: "none" }}><dt style={label}>Owner</dt><dd style={value}>{owner}</dd></div>
    </dl>
  );
}