UI components

<div class="d-flex flex-wrap gap-2"><button class="btn btn-primary" data-toast="The story is ready to publish"><svg class="icon" aria-hidden="true"><use href="#i-save"/></svg>Publish now</button><button class="btn">Save draft</button><button class="btn btn-soft">Review story</button><button class="btn btn-danger-soft" data-confirm="Discard this sample story?">Discard</button><button class="btn btn-ghost">Quiet action</button><button class="btn btn-sm" data-toast="Small action clicked">Compact</button></div>

<div class="d-flex gap-2"><button class="icon-btn" aria-label="Open search" data-palette-open><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg></button><button class="icon-btn" aria-label="Show more" data-toast="More options selected"><svg class="icon" aria-hidden="true"><use href="#i-more"/></svg></button><button class="icon-btn" aria-label="Show notification" data-toast="No new notifications"><svg class="icon" aria-hidden="true"><use href="#i-bell"/></svg></button><button class="icon-btn" aria-label="Copy a link" data-copy="https://example.com/news/the-city-wakes"><svg class="icon" aria-hidden="true"><use href="#i-copy"/></svg></button></div>

<div class="d-flex flex-wrap gap-2"><span class="badge badge-primary">Featured</span><span class="badge badge-success">Approved</span><span class="badge badge-info">Scheduled</span><span class="badge badge-warning">Needs review</span><span class="badge badge-danger">Blocked</span><span class="badge badge-outline">Editorial</span></div><div class="d-flex flex-wrap gap-3 mt-3"><span class="status status-published">Published</span><span class="status status-draft">Draft</span><span class="status status-review">In review</span><span class="status status-scheduled">Scheduled</span></div>

<div class="d-flex gap-3 items-center"><span class="avatar avatar-lg" data-tint="1">MC</span><span class="avatar" data-tint="2">AM</span><span class="avatar" data-tint="3">DP</span><span class="avatar" data-tint="4">LB</span><span class="avatar avatar-sm" data-tint="5">SR</span><span class="avatar avatar-xs" data-tint="6">PR</span></div><p class="hint mt-3">Maya Chen · Alex Morgan · Daniel Park · Lucas Brandt · Sofia Rossi · Priya Raman</p>

<div class="stack"><div class="alert alert-success"><svg class="icon" aria-hidden="true"><use href="#i-check-circle"/></svg><div><strong>Story approved</strong><p>Your editor has cleared this article for publication.</p></div><button class="icon-btn icon-btn-sm" aria-label="Dismiss success" data-dismiss=".alert"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button></div><div class="alert alert-warning"><svg class="icon" aria-hidden="true"><use href="#i-alert"/></svg><div><strong>Revisions requested</strong><p>Check two outstanding source citations.</p></div><button class="icon-btn icon-btn-sm" aria-label="Dismiss warning" data-dismiss=".alert"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button></div></div>

<div class="dropdown"><button class="btn" type="button" data-dropdown aria-expanded="false" aria-haspopup="true">Story actions <svg class="icon" aria-hidden="true"><use href="#i-chevron-down"/></svg></button><div class="dropdown-menu"><button class="dropdown-item" type="button" data-toast="Story sent for review"><svg class="icon" aria-hidden="true"><use href="#i-send"/></svg>Send to review</button><button class="dropdown-item" type="button" data-toast="Link copied"><svg class="icon" aria-hidden="true"><use href="#i-link"/></svg>Copy story link</button><div class="dropdown-divider"></div><button class="dropdown-item" type="button" data-confirm="Move this story to trash?"><svg class="icon" aria-hidden="true"><use href="#i-trash"/></svg>Move to trash</button></div></div>

<div class="d-flex gap-2 flex-wrap"><button class="btn btn-primary" data-modal-open="ui-modal"><svg class="icon" aria-hidden="true"><use href="#i-plus"/></svg>New collection</button><button class="btn" data-confirm="Remove all sample items from the collection?"><svg class="icon" aria-hidden="true"><use href="#i-trash"/></svg>Confirm deletion</button></div>

<button class="btn btn-soft" data-drawer-open="ui-drawer"><svg class="icon" aria-hidden="true"><use href="#i-sliders"/></svg>Open review drawer</button>

<div class="d-flex flex-wrap gap-2"><button class="btn" data-toast="Story published successfully" data-toast-type="success">Success</button><button class="btn" data-toast="Upcoming scheduled maintenance" data-toast-type="warning">Warning</button><button class="btn" data-toast="Publishing connection failed" data-toast-type="danger">Error</button><button class="btn" data-toast="Sync is ready" data-toast-type="info">Info</button></div>

<div class="tabs" role="tablist" aria-label="News feeds"><button class="tab is-active" type="button" role="tab" id="ui-tab-a" aria-controls="ui-panel-a" aria-selected="true">Latest</button><button class="tab" type="button" role="tab" id="ui-tab-b" aria-controls="ui-panel-b" aria-selected="false">Scheduled</button><button class="tab" type="button" role="tab" id="ui-tab-c" aria-controls="ui-panel-c" aria-selected="false">Archived</button></div><div id="ui-panel-a" role="tabpanel" aria-labelledby="ui-tab-a" class="tab-panel mt-3"><p>5 new stories published across News, Business and Culture.</p></div><div id="ui-panel-b" role="tabpanel" aria-labelledby="ui-tab-b" class="tab-panel mt-3" hidden><p>4 stories waiting for their scheduled publishing window.</p></div><div id="ui-panel-c" role="tabpanel" aria-labelledby="ui-tab-c" class="tab-panel mt-3" hidden><p>26 archived stories remain available for reference.</p></div>

<div class="segmented" data-toggle-group><button type="button" aria-pressed="true" class="is-active">Day</button><button type="button" aria-pressed="false">Week</button><button type="button" aria-pressed="false">Month</button></div><p class="hint mt-3">Click an interval to switch the selected view.</p>

<div class="stack"><div class="progress-row"><div class="progress-meta"><strong>Newsletter quota</strong><span>72%</span></div><div class="progress ui-progress"><span style="--progress:72%"></span></div></div><div class="progress-row"><div class="progress-meta"><strong>Draft readiness</strong><span>86%</span></div><div class="progress progress-lg ui-progress is-success"><span style="--progress:86%"></span></div></div><div class="progress-row"><div class="progress-meta"><strong>Monthly storage</strong><span>91%</span></div><div class="progress ui-progress is-warning"><span style="--progress:91%"></span></div></div></div>

<div class="ui-stat-row"><div class="stat"><div class="stat-head"><span>Page views</span><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg></div><strong class="stat-value">284.6K</strong><p class="stat-foot text-success">+12.4% this week</p></div><div class="stat"><div class="stat-head"><span>Published</span><svg class="icon" aria-hidden="true"><use href="#i-newspaper"/></svg></div><strong class="stat-value">1,204</strong><p class="stat-foot">Across 12 categories</p></div></div>

<nav aria-label="Example breadcrumb"><ol class="breadcrumb"><li><a href="index.html">Dashboard</a></li><li><a href="posts.html">Posts</a></li><li aria-current="page">New story</li></ol></nav>

<div class="ui-accordion"><details open><summary>How do I schedule a story? <svg class="icon" aria-hidden="true"><use href="#i-chevron-down"/></svg></summary><p>Open the editor, choose Schedule in publishing options, then select a date and time.</p></details><details><summary>Can I edit an approved post? <svg class="icon" aria-hidden="true"><use href="#i-chevron-down"/></svg></summary><p>Yes. Revisions move back through the newsroom review workflow.</p></details><details><summary>Where are assets stored? <svg class="icon" aria-hidden="true"><use href="#i-chevron-down"/></svg></summary><p>Upload photos to the Media library and select them when editing stories.</p></details></div>

<div class="d-flex gap-2"><button class="btn" data-tooltip="Send this item to the editorial board" data-toast="Sent to board"><svg class="icon" aria-hidden="true"><use href="#i-send"/></svg>Send to board</button><button class="btn" data-copy="https://example.com/newsroom" data-tooltip="Copy the sample public URL"><svg class="icon" aria-hidden="true"><use href="#i-copy"/></svg>Copy URL</button></div>

<div class="ui-story-card"><img src="assets/images/posts/science-space.webp" loading="lazy" alt="The evening sky above a distant planet"><div><span class="badge badge-primary">Science</span><h3>A new era of deep-space observation</h3><p>Elena Vargas · 8 Nov 2026 · 6 min read</p><a class="btn btn-sm" href="post-editor.html"><svg class="icon" aria-hidden="true"><use href="#i-edit"/></svg>Edit story</a></div></div>

<div class="d-flex flex-wrap gap-2"><button class="btn" data-palette-open><svg class="icon" aria-hidden="true"><use href="#i-command"/></svg>Command palette</button><button class="btn" data-theme-toggle><svg class="icon" aria-hidden="true"><use href="#i-moon"/></svg>Toggle theme</button><button class="btn" data-drawer-open="customizer"><svg class="icon" aria-hidden="true"><use href="#i-sliders"/></svg>Customizer</button></div>