Saga component showcase
Live demos of css/components.css — framework-free classes that any page can use after tokens.css and base.css. Each demo shows the markup beneath it.
Pages
Buttons
Primary, secondary, quiet, danger, affirmative, caution, sizes, icon, add, dashed, loading, pressed and status toggles, link button, segmented control. Forms
Fields, labels, inputs, textarea, painted select and listbox, checkbox, radio, toggle, date picker, search. Cards & tables
Cards, stat cards and grids, tables, list rows, empty state, key-value lists, chips, badges, bar charts and legend, month calendar. Overlays
Modal, confirm dialog, framed shell with local scrim, multi-step header, toasts, popover menu, tooltip, notices. Feedback
Skeletons, progress, notices, avatars. Shell
Full-viewport mock of left nav, top bar, tabs and a roster table.
Primary, secondary, quiet, danger, affirmative, caution, sizes, icon, add, dashed, loading, pressed and status toggles, link button, segmented control. Forms
Fields, labels, inputs, textarea, painted select and listbox, checkbox, radio, toggle, date picker, search. Cards & tables
Cards, stat cards and grids, tables, list rows, empty state, key-value lists, chips, badges, bar charts and legend, month calendar. Overlays
Modal, confirm dialog, framed shell with local scrim, multi-step header, toasts, popover menu, tooltip, notices. Feedback
Skeletons, progress, notices, avatars. Shell
Full-viewport mock of left nav, top bar, tabs and a roster table.
<a class="saga-card saga-card--interactive" href="/showcase/buttons/" style="text-decoration:none;color:inherit"><strong>Buttons</strong><br><span class="text-secondary">Primary, secondary, quiet, danger, affirmative, caution, sizes, icon, add, dashed, loading, pressed and status toggles, link button, segmented control.</span></a>
<a class="saga-card saga-card--interactive" href="/showcase/forms/" style="text-decoration:none;color:inherit"><strong>Forms</strong><br><span class="text-secondary">Fields, labels, inputs, textarea, painted select and listbox, checkbox, radio, toggle, date picker, search.</span></a>
<a class="saga-card saga-card--interactive" href="/showcase/cards-tables/" style="text-decoration:none;color:inherit"><strong>Cards & tables</strong><br><span class="text-secondary">Cards, stat cards and grids, tables, list rows, empty state, key-value lists, chips, badges, bar charts and legend, month calendar.</span></a>
<a class="saga-card saga-card--interactive" href="/showcase/overlays/" style="text-decoration:none;color:inherit"><strong>Overlays</strong><br><span class="text-secondary">Modal, confirm dialog, framed shell with local scrim, multi-step header, toasts, popover menu, tooltip, notices.</span></a>
<a class="saga-card saga-card--interactive" href="/showcase/feedback/" style="text-decoration:none;color:inherit"><strong>Feedback</strong><br><span class="text-secondary">Skeletons, progress, notices, avatars.</span></a>
<a class="saga-card saga-card--interactive" href="/showcase/shell/" style="text-decoration:none;color:inherit"><strong>Shell</strong><br><span class="text-secondary">Full-viewport mock of left nav, top bar, tabs and a roster table.</span></a>Loading the layer
Absolute paths, in this order. Montserrat comes from Google Fonts (DS-009); icons in the demos use iconify-icon, which the system does not require.
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/tokens.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/components.css">