Add skimmable cards, CTAs, collapsibles, tabs, and AI search—clean, accessible, and reusable.
Interactive elements help students skim, decide, and act: cards to spotlight tasks, CTAs to drive action, collapsibles to reduce clutter, tabs to compare options, and search boxes to jump straight to answers.
Short, scannable cards with a clear action. Keep borders, radius, and spacing consistent with your banners/buttons.
<div style="background:#eef6ff;border:1px solid #cfe2ff;border-radius:12px;padding:12px;">...</div>Use native <details> for quick “reveal on demand.” Great for common questions and micro-explainers.
<div style="background:#fdfdfd;border:1px solid #ddd;border-radius:12px;padding:14px;">...</div>Compare options without scrolling. Uses radio inputs so it works with screen readers and keyboard navigation.
<div class="tabs">...inputs/labels/panels...</div>Group longer content into expandable sections. Each uses native <details> for robust accessibility.
<div class="accordion"><details><summary>...</summary><div class="content">...</div></details>...</div>Swap the action URL to point at your library search, a site search, or an “Ask AI” endpoint. The button replaces the default arrow icon.
action to your LibGuides search endpoint or an AskAI proxy.<form class="searchbox" action="#" method="get" role="search" aria-label="Guide search">...</form>Add id="" to headings, then link using #id. We also style :target so the section gets a subtle highlight after the jump.
Try it: Jump to Buttons
<h3 id="buttons">Buttons</h3> ... <a href="#buttons">Jump to Buttons</a>Use descriptive text; add aria-label when the text alone isn’t specific enough.
<a class="btn-pill" aria-label="Open Company Databases" style="background:#2563eb;color:#fff;border:1px solid #1e4ed8;border-radius:999px;padding:8px 14px;text-decoration:none;font-weight:600;" href="#">Open Databases</a>aria-label to icon-only tabs or CTAs; ensure role="search" on search wrappers.