UI Components Easy
Science — Structured Abstract Card
A polished, self-contained structured abstract card for a scientific article, with labelled Background, Methods, Results and Conclusions segments, a keyword chip row, article-type and open-access badges, a DOI line, and copy actions for the abstract and an APA citation. Includes an accent left rail, peer-review badge, a smooth reveal for the conclusions section, and a toast helper, built with vanilla HTML, CSS and JavaScript only.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.05);
--shadow-md: 0 6px 24px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page {
max-width: 760px;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 3rem;
}
.page-head { margin-bottom: 1.75rem; }
.eyebrow {
font-family: var(--ui);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.4rem;
}
.page-head h1 {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.lede { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
/* ---- Card ---- */
.abstract-card {
position: relative;
display: flex;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.rail {
flex: 0 0 6px;
background: linear-gradient(180deg, var(--accent), var(--teal));
}
.card-body {
flex: 1 1 auto;
padding: clamp(1.25rem, 3.5vw, 2rem);
min-width: 0;
}
/* ---- Badges ---- */
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.28rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--line-2);
color: var(--ink-2);
background: var(--bg-alt);
}
.badge-type { color: var(--accent-d); background: var(--accent-50); border-color: rgba(26, 79, 138, 0.25); }
.badge-oa { color: var(--teal); background: var(--teal-50); border-color: rgba(15, 125, 120, 0.25); }
.badge-oa svg { flex: 0 0 auto; }
.badge-peer { color: var(--ok); background: rgba(47, 158, 111, 0.1); border-color: rgba(47, 158, 111, 0.28); }
/* ---- Title / authors ---- */
.art-title {
font-size: clamp(1.2rem, 3.2vw, 1.5rem);
font-weight: 700;
line-height: 1.32;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.authors { margin: 0 0 0.3rem; font-size: 0.98rem; color: var(--ink); }
.authors .au { font-weight: 600; }
.authors .au-corr { color: var(--accent-d); }
.authors sup { font-family: var(--ui); font-size: 0.6em; color: var(--muted); }
.affil {
margin: 0 0 1.25rem;
font-family: var(--ui);
font-size: 0.78rem;
line-height: 1.5;
color: var(--muted);
}
.affil sup { color: var(--accent); }
/* ---- Abstract segments ---- */
.abstract { margin: 0; }
.seg {
padding: 0.7rem 0 0.7rem 0;
border-top: 1px solid var(--line);
}
.seg:first-child { border-top: none; padding-top: 0; }
.seg dt {
font-family: var(--ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.25rem;
}
.seg dd {
margin: 0;
font-size: 1rem;
color: var(--ink-2);
}
.seg dd em { font-style: italic; }
.seg .mono { font-family: var(--mono); font-size: 0.86em; color: var(--ink); }
.seg-extra {
animation: fade 0.32s ease;
}
@keyframes fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ---- Reveal button ---- */
.reveal-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-family: var(--ui);
font-size: 0.82rem;
font-weight: 600;
color: var(--accent);
background: none;
border: none;
padding: 0.35rem 0;
cursor: pointer;
}
.reveal-btn:hover .reveal-label { text-decoration: underline; }
.reveal-btn .chev { transition: transform 0.25s ease; }
.reveal-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* ---- Keywords ---- */
.keywords {
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.kw-label {
font-family: var(--ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
margin-right: 0.25rem;
}
.chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0;
}
.chip {
font-family: var(--ui);
font-size: 0.78rem;
font-weight: 500;
color: var(--accent-d);
background: var(--accent-50);
border: 1px solid rgba(26, 79, 138, 0.18);
border-radius: 999px;
padding: 0.25rem 0.7rem;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.chip:hover { background: var(--accent); color: #fff; }
.chip:active { transform: scale(0.96); }
/* ---- Footer ---- */
.card-foot {
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
}
.doi { margin: 0 0 0.5rem; font-size: 0.85rem; }
.doi-label {
font-family: var(--ui);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--muted);
margin-right: 0.5rem;
}
.doi-link {
font-size: 0.85rem;
color: var(--accent);
text-decoration: none;
}
.doi-link:hover { text-decoration: underline; }
.meta-line {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--muted);
margin-bottom: 1.1rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
}
.meta-line .dot { color: var(--line-2); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--ui);
font-size: 0.84rem;
font-weight: 600;
padding: 0.55rem 0.95rem;
border-radius: var(--r-md);
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent-d); }
.btn-primary:hover { background: var(--accent-d); }
.btn-primary.is-done { background: var(--ok); border-color: var(--ok); }
.btn-ghost { background: var(--bg); color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); }
/* ---- Disclaimer ---- */
.disclaimer {
margin: 1.5rem 0 0;
font-family: var(--ui);
font-size: 0.76rem;
color: var(--muted);
text-align: center;
}
/* ---- Toast ---- */
.toast {
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translate(-50%, 1.5rem);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 0.84rem;
font-weight: 500;
padding: 0.6rem 1.1rem;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 50;
max-width: calc(100vw - 2rem);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---- Focus ---- */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Responsive ---- */
@media (max-width: 640px) {
.abstract-card { border-radius: var(--r-md); }
.rail { flex-basis: 5px; }
.art-title { font-size: 1.18rem; }
.actions { width: 100%; }
.btn { flex: 1 1 auto; justify-content: center; }
.meta-line { font-size: 0.68rem; }
}(function () {
"use strict";
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2200);
}
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "absolute";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
resolve();
} catch (e) {
reject(e);
}
});
}
/* ---- Reveal conclusions ---- */
var revealBtn = document.getElementById("revealBtn");
var extraSeg = document.querySelector(".seg-extra");
var revealLabel = revealBtn ? revealBtn.querySelector(".reveal-label") : null;
if (revealBtn && extraSeg) {
revealBtn.addEventListener("click", function () {
var open = extraSeg.hasAttribute("hidden");
if (open) {
extraSeg.removeAttribute("hidden");
revealBtn.setAttribute("aria-expanded", "true");
if (revealLabel) revealLabel.textContent = "Hide conclusions";
} else {
extraSeg.setAttribute("hidden", "");
revealBtn.setAttribute("aria-expanded", "false");
if (revealLabel) revealLabel.textContent = "Show conclusions";
}
});
}
/* ---- Build plain-text abstract ---- */
function buildAbstractText() {
var lines = [];
var title = document.getElementById("art-title");
if (title) lines.push(title.textContent.trim());
var authors = document.querySelector(".authors");
if (authors) lines.push(authors.textContent.replace(/\s+/g, " ").trim());
lines.push("");
var segs = document.querySelectorAll("#abstract .seg");
segs.forEach(function (seg) {
var dt = seg.querySelector("dt");
var dd = seg.querySelector("dd");
if (dt && dd) {
lines.push(dt.textContent.trim() + ": " + dd.textContent.replace(/\s+/g, " ").trim());
}
});
lines.push("");
var doi = document.getElementById("doiLink");
if (doi) lines.push("DOI: " + doi.textContent.trim());
return lines.join("\n");
}
function buildCitation() {
var doi = document.getElementById("doiLink");
var doiTxt = doi ? doi.textContent.trim() : "";
return (
"Velasco, A. R., Okonkwo, J., Lindqvist, M., & Raghavan, P. S. (2026). " +
"Mitochondrial fission dynamics regulate dendritic spine maturation in cortical neurons under metabolic stress. " +
"Journal of Cell & Developmental Biology, 41(3), 211–229. https://doi.org/" + doiTxt
);
}
/* ---- Copy abstract ---- */
var copyBtn = document.getElementById("copyBtn");
var copyLabel = document.getElementById("copyLabel");
if (copyBtn) {
copyBtn.addEventListener("click", function () {
copyText(buildAbstractText())
.then(function () {
copyBtn.classList.add("is-done");
if (copyLabel) copyLabel.textContent = "Copied";
toast("Abstract copied to clipboard");
setTimeout(function () {
copyBtn.classList.remove("is-done");
if (copyLabel) copyLabel.textContent = "Copy abstract";
}, 1800);
})
.catch(function () {
toast("Copy failed — select and copy manually");
});
});
}
/* ---- Copy citation ---- */
var citeBtn = document.getElementById("citeBtn");
if (citeBtn) {
citeBtn.addEventListener("click", function () {
copyText(buildCitation())
.then(function () {
toast("Citation copied (APA)");
})
.catch(function () {
toast("Copy failed — try again");
});
});
}
/* ---- Keyword chips ---- */
var chips = document.querySelectorAll(".chip");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
var kw = chip.getAttribute("data-kw") || chip.textContent.trim();
copyText(kw).then(function () {
toast('Keyword "' + kw + '" copied');
}).catch(function () {
toast("Search: " + kw);
});
});
});
/* ---- DOI link ---- */
var doiLink = document.getElementById("doiLink");
if (doiLink) {
doiLink.addEventListener("click", function (e) {
e.preventDefault();
copyText("https://doi.org/" + doiLink.textContent.trim())
.then(function () { toast("DOI link copied"); })
.catch(function () { toast("DOI: " + doiLink.textContent.trim()); });
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Structured Abstract 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=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page">
<header class="page-head">
<p class="eyebrow">Cell & Developmental Biology · Open Access</p>
<h1>Structured Abstract</h1>
<p class="lede">A self-contained article abstract card with labelled segments, keyword chips, article-type badges, and a copy action.</p>
</header>
<article class="abstract-card" aria-labelledby="art-title">
<div class="rail" aria-hidden="true"></div>
<div class="card-body">
<div class="badge-row">
<span class="badge badge-type" title="Article type">Research Article</span>
<span class="badge badge-oa" title="Open Access">
<svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path fill="currentColor" d="M12 2a6 6 0 0 0-6 6v2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V8a6 6 0 0 0-6-6Zm4 8H8V8a4 4 0 0 1 8 0Z"/></svg>
Open Access
</span>
<span class="badge badge-peer" title="Peer review status">Peer-reviewed</span>
</div>
<h2 id="art-title" class="art-title">Mitochondrial fission dynamics regulate dendritic spine maturation in cortical neurons under metabolic stress</h2>
<p class="authors">
<span class="au">A. R. Velasco</span><sup>1</sup>,
<span class="au">J. Okonkwo</span><sup>1,2</sup>,
<span class="au">M. Lindqvist</span><sup>3</sup>,
<span class="au au-corr">P. S. Raghavan</span><sup>1,✉</sup>
</p>
<p class="affil">
<sup>1</sup> Dept. of Neurobiology, Brennan Institute, Aotea University ·
<sup>2</sup> Center for Cellular Bioenergetics, Marwick College ·
<sup>3</sup> Nordhavn Institute for Systems Biology
</p>
<dl class="abstract" id="abstract">
<div class="seg">
<dt>Background</dt>
<dd>Dendritic spine maturation requires sustained local ATP supply, yet how neurons coordinate mitochondrial morphology with synaptic remodelling during metabolic stress remains poorly understood. Aberrant fission has been linked to spine loss across several neurodevelopmental conditions.</dd>
</div>
<div class="seg">
<dt>Methods</dt>
<dd>We combined live-cell confocal imaging of primary murine cortical neurons (<span class="mono">n = 142</span> cells, 6 independent cultures) with conditional knockdown of <em>Drp1</em>, fluorescent ATP biosensors, and a glucose-deprivation paradigm. Spine morphology was quantified at <span class="mono">0, 6, 12, 24 h</span> using an automated classifier (Background · Methods · Results · Conclusions structure shown here).</dd>
</div>
<div class="seg">
<dt>Results</dt>
<dd>Drp1 knockdown reduced mitochondrial fragmentation by <span class="mono">38.4 ± 4.1%</span> (<span class="mono">p < 0.001</span>) and preserved <span class="mono">71%</span> of mushroom-type spines under stress versus <span class="mono">29%</span> in controls. Local ATP indices correlated with spine head volume (<span class="mono">r = 0.62</span>, <span class="mono">95% CI 0.51–0.71</span>). The protective effect was abolished by pharmacological uncoupling, indicating a bioenergetic mechanism rather than a structural one.</dd>
</div>
<div class="seg seg-extra" hidden>
<dt>Conclusions</dt>
<dd>Constraining mitochondrial fission stabilises the energetic microenvironment needed for spine maturation under metabolic stress. These findings position Drp1 activity as a candidate node for preserving synaptic architecture, and motivate dose-controlled studies of fission modulators in models of energy-limited neurodevelopment.</dd>
</div>
</dl>
<button type="button" class="reveal-btn" id="revealBtn" aria-expanded="false" aria-controls="abstract">
<span class="reveal-label">Show conclusions</span>
<svg class="chev" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6"/></svg>
</button>
<div class="keywords" role="group" aria-label="Keywords">
<span class="kw-label">Keywords</span>
<ul class="chips">
<li><button type="button" class="chip" data-kw="mitochondrial fission">mitochondrial fission</button></li>
<li><button type="button" class="chip" data-kw="dendritic spines">dendritic spines</button></li>
<li><button type="button" class="chip" data-kw="Drp1">Drp1</button></li>
<li><button type="button" class="chip" data-kw="bioenergetics">bioenergetics</button></li>
<li><button type="button" class="chip" data-kw="cortical neurons">cortical neurons</button></li>
<li><button type="button" class="chip" data-kw="metabolic stress">metabolic stress</button></li>
</ul>
</div>
<footer class="card-foot">
<p class="doi">
<span class="doi-label">DOI</span>
<a href="#" class="mono doi-link" id="doiLink">10.48211/jcdb.2026.00471</a>
</p>
<div class="meta-line">
<span class="mono">J. Cell & Dev. Biol.</span>
<span class="dot">·</span>
<span class="mono">Vol. 41(3), 211–229</span>
<span class="dot">·</span>
<span class="mono">Received 14 Jan 2026</span>
<span class="dot">·</span>
<span class="mono">Accepted 02 May 2026</span>
</div>
<div class="actions">
<button type="button" class="btn btn-primary" id="copyBtn">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 9V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4M5 9h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2Z"/></svg>
<span id="copyLabel">Copy abstract</span>
</button>
<button type="button" class="btn btn-ghost" id="citeBtn">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 7h4v4l-2 4H7zM15 7h4v4l-2 4h-2z"/></svg>
Copy citation
</button>
</div>
</footer>
</div>
</article>
<p class="disclaimer">Illustrative UI only — fictional authors, data, and figures.</p>
</main>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Structured Abstract Card
A bordered article card that presents a structured abstract the way journals do: the prose is split into clearly labelled Background, Methods, Results, and Conclusions segments, each separated by a hairline rule. An accent left rail, an article-type badge, an open-access badge, and a peer-review badge give the card immediate scientific context, while a keyword chip row and a monospaced DOI line sit at the foot.
The card keeps things compact by default — the Conclusions segment is hidden behind a “Show conclusions” toggle that expands with a small fade animation. A primary Copy abstract button assembles the full title, authors, every segment and the DOI into plain text and writes it to the clipboard, while Copy citation produces a formatted APA reference. Clicking a keyword chip copies that term, and clicking the DOI copies its resolver link.
Everything is vanilla HTML, CSS and JavaScript with no dependencies: Source Serif 4 for prose, Inter for labels and controls, and JetBrains Mono for numbers, units and citations. A small toast() helper gives feedback on every copy action, the layout is keyboard-accessible with visible focus rings, and it reflows cleanly down to about 360px wide.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.