UI Components Easy
Museum — Artifact Card
A curatorial artifact card for collection grids, shown across six fictional works and three display sizes. Each card frames a CSS-drawn image inside a soft mat, then sets the title in italic serif above artist, date, medium, a gold catalog-number chip, and an On view or In storage status pill. Hovering or focusing a card lifts it and reveals quick actions to favorite the piece or add it to a self-guided tour, with a live tour counter and confirmation toasts throughout.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--paper: #f6f4ef;
--wall: #ffffff;
--charcoal: #1c1b19;
--ink: #2a2825;
--ink-2: #4a4640;
--muted: #8c857a;
--gold: #a98140;
--gold-d: #876631;
--gold-50: #f3ecdd;
--line: rgba(28, 27, 25, 0.12);
--line-2: rgba(28, 27, 25, 0.2);
--ok: #3f7d56;
--warn: #b8842c;
--danger: #b4493a;
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06), 0 1px 3px rgba(28, 27, 25, 0.05);
--shadow-lg: 0 18px 40px -18px rgba(28, 27, 25, 0.35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------- masthead ---------- */
.masthead {
border-bottom: 1px solid var(--line);
background:
radial-gradient(120% 120% at 50% -20%, var(--gold-50), transparent 60%),
var(--wall);
}
.masthead-inner {
max-width: 1140px;
margin: 0 auto;
padding: 56px 28px 36px;
}
.eyebrow {
margin: 0 0 10px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-d);
}
.masthead h1 {
margin: 0 0 14px;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.04;
letter-spacing: 0.01em;
color: var(--charcoal);
}
.lede {
margin: 0;
max-width: 60ch;
color: var(--ink-2);
font-size: 1.0625rem;
}
/* ---------- toolbar ---------- */
.toolbar {
margin-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.seg {
display: inline-flex;
padding: 4px;
gap: 2px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--paper);
}
.seg-btn {
appearance: none;
border: 0;
cursor: pointer;
font-family: var(--sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-2);
padding: 8px 16px;
border-radius: 999px;
background: transparent;
transition: background 0.18s ease, color 0.18s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active {
background: var(--charcoal);
color: var(--paper);
}
.tour-meter {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.875rem;
color: var(--ink-2);
}
.tour-meter strong { color: var(--charcoal); }
.tour-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 4px var(--gold-50);
}
/* ---------- wall / grid ---------- */
.wall {
max-width: 1140px;
margin: 0 auto;
padding: 44px 28px 72px;
}
.grid {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
align-items: start;
}
/* ---------- card ---------- */
.card {
background: var(--wall);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 14px 14px 18px;
box-shadow: var(--shadow-sm);
transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 0.22s ease, border-color 0.22s ease;
outline: none;
}
.card:hover,
.card:focus-visible {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--line-2);
}
.card:focus-visible {
box-shadow: var(--shadow-lg), 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
}
/* ---------- frame + mat + art ---------- */
.frame {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
}
.mat {
padding: 16px;
background: linear-gradient(180deg, #fbfaf6, #efece3);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.art {
aspect-ratio: 4 / 5;
border: 1px solid rgba(28, 27, 25, 0.28);
box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.5),
0 6px 14px -8px rgba(28, 27, 25, 0.45);
border-radius: 2px;
}
/* fictional artwork "images" — pure CSS */
.art--vandermeer {
background:
linear-gradient(180deg, rgba(255, 244, 214, 0.85), transparent 45%),
linear-gradient(135deg, #c9923f 0%, #8a5a2c 42%, #3c4a55 43%, #6d7c84 100%);
}
.art--vessel {
background:
radial-gradient(60% 70% at 50% 38%, rgba(255, 255, 255, 0.45), transparent 60%),
linear-gradient(160deg, #9fc9b6 0%, #6ba38c 55%, #3f6b59 100%);
}
.art--light {
background:
linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.6) 39%, transparent 42%),
linear-gradient(200deg, #f0c873 0%, #d77a4a 48%, #6b3b52 100%);
}
.art--map {
background:
repeating-linear-gradient(45deg, rgba(135, 102, 49, 0.12) 0 2px, transparent 2px 12px),
linear-gradient(160deg, #efe2c4 0%, #d8c397 60%, #b79d6a 100%);
}
.art--bronze {
background:
radial-gradient(70% 80% at 40% 30%, rgba(255, 220, 160, 0.4), transparent 60%),
linear-gradient(160deg, #8d6a3c 0%, #5b4225 55%, #2f2113 100%);
}
.art--garden {
background:
radial-gradient(50% 40% at 70% 25%, rgba(255, 210, 150, 0.55), transparent 60%),
linear-gradient(170deg, #2f4636 0%, #4e6a4a 40%, #8a6f7e 78%, #c79a82 100%);
}
/* ---------- quick actions ---------- */
.quick {
position: absolute;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.card:hover .quick,
.card:focus-within .quick {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.q-btn {
appearance: none;
cursor: pointer;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--line-2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
color: var(--ink-2);
box-shadow: var(--shadow-sm);
transition: transform 0.15s ease, color 0.15s ease,
border-color 0.15s ease, background 0.15s ease;
}
.q-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.q-btn:hover { transform: scale(1.08); color: var(--ink); }
.q-btn:focus-visible {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-50);
}
.q-btn[data-act="fav"][aria-pressed="true"] {
color: var(--danger);
border-color: rgba(180, 73, 58, 0.5);
}
.q-btn[data-act="fav"][aria-pressed="true"] svg { fill: var(--danger); }
.q-btn[data-act="tour"][aria-pressed="true"] {
color: var(--paper);
background: var(--gold);
border-color: var(--gold-d);
}
/* ---------- meta ---------- */
.meta { padding: 16px 4px 0; }
.status {
display: inline-block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
margin-bottom: 10px;
}
.status--on {
color: var(--ok);
background: rgba(63, 125, 86, 0.1);
}
.status--off {
color: var(--muted);
background: rgba(140, 133, 122, 0.14);
}
.title {
margin: 0 0 4px;
font-family: var(--serif);
font-weight: 600;
font-size: 1.4rem;
line-height: 1.16;
color: var(--charcoal);
}
.title em { font-style: italic; }
.byline {
margin: 0 0 6px;
font-size: 0.9375rem;
color: var(--ink-2);
}
.byline .sep { color: var(--muted); margin: 0 4px; }
.medium {
margin: 0 0 14px;
font-size: 0.875rem;
color: var(--muted);
}
.cat {
display: inline-block;
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--gold-d);
padding: 3px 10px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--gold-50);
}
/* ---------- size variants ---------- */
.grid[data-size="lg"] {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.grid[data-size="lg"] .title { font-size: 1.65rem; }
.grid[data-size="sm"] {
grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
gap: 22px;
}
.grid[data-size="sm"] .card { padding: 10px 10px 14px; border-radius: var(--r-md); }
.grid[data-size="sm"] .mat { padding: 11px; }
.grid[data-size="sm"] .art { aspect-ratio: 1 / 1; }
.grid[data-size="sm"] .title { font-size: 1.18rem; }
.grid[data-size="sm"] .medium { display: none; }
.grid[data-size="sm"] .quick { top: 18px; right: 18px; }
/* ---------- toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 18px);
background: var(--charcoal);
color: var(--paper);
font-size: 0.875rem;
padding: 11px 18px;
border-radius: 999px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 50;
}
.toast.is-show {
opacity: 1;
transform: translate(-50%, 0);
}
.toast strong { color: var(--gold-50); font-weight: 600; }
/* ---------- responsive ---------- */
@media (max-width: 520px) {
.masthead-inner { padding: 40px 18px 28px; }
.wall { padding: 30px 18px 56px; }
.grid,
.grid[data-size="lg"],
.grid[data-size="sm"] {
grid-template-columns: 1fr;
gap: 22px;
}
.grid[data-size="sm"] .art { aspect-ratio: 4 / 5; }
.grid[data-size="sm"] .medium { display: block; }
.toolbar { gap: 14px; }
.quick { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; }
}(function () {
"use strict";
var grid = document.getElementById("grid");
var toastEl = document.getElementById("toast");
var tourCountEl = document.getElementById("tourCount");
var segBtns = Array.prototype.slice.call(document.querySelectorAll(".seg-btn"));
/* simple in-memory state */
var favorites = new Set();
var tour = new Set();
/* ---------- toast helper ---------- */
var toastTimer = null;
function toast(msg) {
toastEl.innerHTML = msg;
toastEl.classList.add("is-show");
if (toastTimer) clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2200);
}
function titleOf(card) {
var t = card.querySelector(".title");
return t ? t.textContent.trim() : "this work";
}
function updateTourMeter() {
tourCountEl.textContent = String(tour.size);
}
/* ---------- card / quick-action clicks ---------- */
grid.addEventListener("click", function (e) {
var btn = e.target.closest(".q-btn");
if (!btn) return;
var card = btn.closest(".card");
if (!card) return;
var id = card.getAttribute("data-id");
var act = btn.getAttribute("data-act");
var name = titleOf(card);
var pressed = btn.getAttribute("aria-pressed") === "true";
var next = !pressed;
btn.setAttribute("aria-pressed", String(next));
if (act === "fav") {
if (next) {
favorites.add(id);
toast("Saved <strong>" + name + "</strong> to favorites");
} else {
favorites.delete(id);
toast("Removed <strong>" + name + "</strong> from favorites");
}
} else if (act === "tour") {
if (next) {
tour.add(id);
toast("Added <strong>" + name + "</strong> to your tour");
} else {
tour.delete(id);
toast("Removed <strong>" + name + "</strong> from your tour");
}
updateTourMeter();
}
});
/* keyboard: pressing Enter/Space on a focused card adds to tour */
grid.addEventListener("keydown", function (e) {
var card = e.target.closest(".card");
if (!card || e.target !== card) return;
if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
e.preventDefault();
var tourBtn = card.querySelector('.q-btn[data-act="tour"]');
if (tourBtn) tourBtn.click();
}
});
/* ---------- size segmented control ---------- */
function setSize(size, sourceBtn) {
grid.setAttribute("data-size", size);
segBtns.forEach(function (b) {
var active = b === sourceBtn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
}
segBtns.forEach(function (b) {
b.addEventListener("click", function () {
setSize(b.getAttribute("data-size"), b);
});
});
/* initialise default size */
grid.setAttribute("data-size", "md");
updateTourMeter();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Museum — Artifact Card</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="masthead">
<div class="masthead-inner">
<p class="eyebrow">Permanent Collection</p>
<h1>The Hartwell Gallery of Fine & Decorative Art</h1>
<p class="lede">A reusable artifact card, shown across six works and three display sizes. Hover or focus a card to reveal quick actions — mark a favorite or add the piece to your self-guided tour.</p>
<div class="toolbar" role="toolbar" aria-label="Gallery controls">
<div class="seg" role="group" aria-label="Card size">
<button type="button" class="seg-btn is-active" data-size="md" aria-pressed="true">Medium</button>
<button type="button" class="seg-btn" data-size="lg" aria-pressed="false">Large</button>
<button type="button" class="seg-btn" data-size="sm" aria-pressed="false">Compact</button>
</div>
<div class="tour-meter" aria-live="polite">
<span class="tour-dot" aria-hidden="true"></span>
<span><strong id="tourCount">0</strong> on your tour</span>
</div>
</div>
</div>
</header>
<main class="wall">
<section class="grid" id="grid" aria-label="Artifacts on view">
<!-- Card 1 -->
<article class="card" data-id="A-1841" tabindex="0" aria-label="The Cartographer's Window by Élise Vandermeer, 1908">
<div class="frame">
<div class="mat">
<div class="art art--vandermeer" role="img" aria-label="Oil painting of a sunlit window over rooftops"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--on">On view · Gallery 7</span>
<h2 class="title"><em>The Cartographer's Window</em></h2>
<p class="byline">Élise Vandermeer <span class="sep">·</span> 1908</p>
<p class="medium">Oil on linen, 92 × 71 cm</p>
<span class="cat">№ A-1841</span>
</div>
</article>
<!-- Card 2 -->
<article class="card" data-id="S-0307" tabindex="0" aria-label="Vessel with Heron Motif, Northern Goryeo workshop, c. 1150">
<div class="frame">
<div class="mat">
<div class="art art--vessel" role="img" aria-label="Celadon vessel with inlaid heron decoration"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--off">In storage</span>
<h2 class="title"><em>Vessel with Heron Motif</em></h2>
<p class="byline">Northern Goryeo workshop <span class="sep">·</span> c. 1150</p>
<p class="medium">Inlaid celadon stoneware, h. 34 cm</p>
<span class="cat">№ S-0307</span>
</div>
</article>
<!-- Card 3 -->
<article class="card" data-id="A-2290" tabindex="0" aria-label="Study of Falling Light by Tomás Réquard, 1971">
<div class="frame">
<div class="mat">
<div class="art art--light" role="img" aria-label="Abstract gradient study of falling light"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--on">On view · Gallery 12</span>
<h2 class="title"><em>Study of Falling Light</em></h2>
<p class="byline">Tomás Réquard <span class="sep">·</span> 1971</p>
<p class="medium">Acrylic and graphite on board, 120 × 120 cm</p>
<span class="cat">№ A-2290</span>
</div>
</article>
<!-- Card 4 -->
<article class="card" data-id="P-5512" tabindex="0" aria-label="Map of the Eastern Reach, attributed to the Salviati Atelier, 1559">
<div class="frame">
<div class="mat">
<div class="art art--map" role="img" aria-label="Antique engraved map of a coastline"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--on">On view · Print Room</span>
<h2 class="title"><em>Map of the Eastern Reach</em></h2>
<p class="byline">attrib. Salviati Atelier <span class="sep">·</span> 1559</p>
<p class="medium">Hand-coloured copper engraving, 48 × 63 cm</p>
<span class="cat">№ P-5512</span>
</div>
</article>
<!-- Card 5 -->
<article class="card" data-id="S-1188" tabindex="0" aria-label="Reclining Figure, No. 3 by Marguerite Aubin, 1934">
<div class="frame">
<div class="mat">
<div class="art art--bronze" role="img" aria-label="Bronze sculpture of a reclining figure"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--off">In storage</span>
<h2 class="title"><em>Reclining Figure, No. 3</em></h2>
<p class="byline">Marguerite Aubin <span class="sep">·</span> 1934</p>
<p class="medium">Patinated bronze, 41 × 88 × 36 cm</p>
<span class="cat">№ S-1188</span>
</div>
</article>
<!-- Card 6 -->
<article class="card" data-id="A-3076" tabindex="0" aria-label="Garden at Dusk, Sèvres by Henrietta Cole, 1889">
<div class="frame">
<div class="mat">
<div class="art art--garden" role="img" aria-label="Impressionist painting of a garden at dusk"></div>
</div>
<div class="quick" role="group" aria-label="Quick actions">
<button type="button" class="q-btn" data-act="fav" aria-pressed="false" title="Add to favorites" aria-label="Add to favorites">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.7-10-9.2C.4 8.6 2 5 5.5 5 7.6 5 9 6.3 12 9c3-2.7 4.4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.3 12 21 12 21z"/></svg>
</button>
<button type="button" class="q-btn" data-act="tour" aria-pressed="false" title="Add to tour" aria-label="Add to self-guided tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M2 12h20"/></svg>
</button>
</div>
</div>
<div class="meta">
<span class="status status--on">On view · Gallery 4</span>
<h2 class="title"><em>Garden at Dusk, Sèvres</em></h2>
<p class="byline">Henrietta Cole <span class="sep">·</span> 1889</p>
<p class="medium">Oil on canvas, 65 × 81 cm</p>
<span class="cat">№ A-3076</span>
</div>
</article>
</section>
</main>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Artifact Card
A single reusable card for a museum’s collection wall, presented as a gallery of six fictional works — a Vandermeer oil, a Goryeo celadon vessel, a Réquard light study, a Salviati engraved map, an Aubin bronze, and a Cole garden scene. Every artwork is drawn entirely in CSS as a framed, matted block, so the component is fully self-contained with no external images. Each card pairs an italic serif title with the artist and date, the medium and dimensions, a gold catalog-number chip, and a status pill that reads On view with a gallery number or In storage.
The cards lift on hover and on keyboard focus, revealing two quick actions tucked into the mat: a heart to favorite the work and a plus to add it to a self-guided tour. Actions toggle their pressed state, the tour count updates live in the masthead meter, and a small toast confirms each change. Focused cards also respond to Enter or Space to drop the piece straight onto the tour.
A segmented control switches the whole grid between three sizes — Medium, Large, and Compact — which retile the cards and adjust the artwork aspect ratio and typographic scale. The layout uses generous wall space, collapses to a single column at narrow widths, keeps quick actions visible on touch, and respects reduced-motion and visible-focus preferences for accessible, keyboard-friendly use.
Illustrative UI only — demo data; not a real museum system.