Detailed representation of an object.
<div class="detail-demo" style="border-radius:10px; border-top: 4px solid #A8E6C1;">
<div class="detail-demo__head">
<h2 class="detail-demo__title">Order #4821</h2>
<span class="status-badge status-badge--active">active</span>
</div>
<dl class="detail-dl detail-dl--two-column">
<div class="detail-field"><dt>Customer</dt><dd>Priya Nair</dd></div>
<div class="detail-field"><dt>Email</dt><dd>priya@example.com</dd></div>
<div class="detail-field"><dt>Placed</dt><dd><time datetime="2026-08-12T09:30:00Z">12 Aug 2026, 9:30am</time></dd></div>
<div class="detail-field"><dt>Total</dt><dd>£128.00</dd></div>
<div class="detail-field"><dt>Shipping</dt><dd>14 Elm Road, Bristol BS1 4ST</dd></div>
<div class="detail-field detail-field--notes"><dt>Notes</dt><dd>Gift wrap requested; leave with neighbour if out.</dd></div>
</dl>
</div>
<style>
.detail-demo { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; padding: 20px; box-sizing: border-box; }
.detail-demo__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.detail-demo__title { margin: 0; font-size: 18px; font-weight: 600; }
.status-badge { font-size: 11px; font-weight: 600; text-transform: capitalize; padding: 3px 10px; border-radius: 999px; }
.status-badge--active { background: #A8E6C1; color: #241430; }
.status-badge--pending { background: #E8A020; color: #241430; }
.status-badge--closed { background: #24143018; color: #241430; }
.detail-dl { margin: 0; }
.detail-field dt { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #24143099; margin-bottom: 2px; }
.detail-field dd { margin: 0 0 16px; font-size: 14px; }
.detail-dl--two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.detail-dl--two-column .detail-field dd { margin-bottom: 4px; }
.detail-field--notes { border-top: 1px dashed #24143022; padding-top: 10px; margin-top: 4px; }
.detail-dl--two-column .detail-field--notes { grid-column: 1 / -1; }
</style><div class="detail-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143022] p-5 box-border" style="border-radius:10px; border-top: 4px solid #A8E6C1;">
<div class="flex items-center gap-2.5 mb-4">
<h2 class="m-0 text-lg font-semibold">Order #4821</h2>
<span class="detail-tw-badge detail-tw-badge--active text-[11px] font-semibold capitalize px-2.5 py-[3px] rounded-full">active</span>
</div>
<dl class="detail-tw-dl detail-tw-dl--two-column m-0">
<div class="detail-tw-field"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Customer</dt><dd class="m-0 mb-3.5 text-sm">Priya Nair</dd></div>
<div class="detail-tw-field"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Email</dt><dd class="m-0 mb-3.5 text-sm">priya@example.com</dd></div>
<div class="detail-tw-field"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Placed</dt><dd class="m-0 mb-3.5 text-sm"><time datetime="2026-08-12T09:30:00Z">12 Aug 2026, 9:30am</time></dd></div>
<div class="detail-tw-field"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Total</dt><dd class="m-0 mb-3.5 text-sm">£128.00</dd></div>
<div class="detail-tw-field"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Shipping</dt><dd class="m-0 mb-3.5 text-sm">14 Elm Road, Bristol BS1 4ST</dd></div>
<div class="detail-tw-field detail-tw-field--notes border-t border-dashed border-[#24143022] pt-2.5 mt-1"><dt class="text-[12px] uppercase tracking-wide text-[#241430]/60 mb-0.5">Notes</dt><dd class="m-0 text-sm">Gift wrap requested; leave with neighbour if out.</dd></div>
</dl>
</div>
<style>
.detail-tw-badge--active { background: #A8E6C1; color: #241430; }
.detail-tw-badge--pending { background: #E8A020; color: #241430; }
.detail-tw-badge--closed { background: #24143018; color: #241430; }
.detail-tw-dl--two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.detail-tw-dl--two-column .detail-tw-field--notes { grid-column: 1 / -1; }
</style>export function DetailView({
name = "Order #4821",
status = "active",
layout = "two-column",
accent = "#A8E6C1",
notes = true,
radius = 10,
}) {
const badgeColors = { active: "#A8E6C1", pending: "#E8A020", closed: "#24143018" };
const fields = [
{ label: "Customer", value: "Priya Nair" },
{ label: "Email", value: "priya@example.com" },
{ label: "Placed", value: <time dateTime="2026-08-12T09:30:00Z">12 Aug 2026, 9:30am</time> },
{ label: "Total", value: "£128.00" },
{ label: "Shipping", value: "14 Elm Road, Bristol BS1 4ST" },
];
const twoColumn = layout === "two-column";
const dlStyle = twoColumn ? { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 28px" } : { display: "block" };
return (
<div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143022", borderTop: `4px solid ${accent}`, borderRadius: radius, padding: 20, boxSizing: "border-box" }}>
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
<h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{name}</h2>
<span style={{ fontSize: 11, fontWeight: 600, textTransform: "capitalize", padding: "3px 10px", borderRadius: 999, background: badgeColors[status] ?? accent, color: "#241430" }}>{status}</span>
</div>
<dl style={{ margin: 0, ...dlStyle }}>
{fields.map((f) => (
<div key={f.label} style={{ marginBottom: twoColumn ? 4 : 16 }}>
<dt style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: ".03em", color: "#24143099", marginBottom: 2 }}>{f.label}</dt>
<dd style={{ margin: 0, fontSize: 14 }}>{f.value}</dd>
</div>
))}
{notes && (
<div style={{ borderTop: "1px dashed #24143022", paddingTop: 10, marginTop: 4, gridColumn: twoColumn ? "1 / -1" : "auto" }}>
<dt style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: ".03em", color: "#24143099", marginBottom: 2 }}>Notes</dt>
<dd style={{ margin: 0, fontSize: 14 }}>Gift wrap requested; leave with neighbour if out.</dd>
</div>
)}
</dl>
</div>
);
}