Widgets

Bootstrap 5.3 building blocks for dashboards and sidebars: cards, list groups, progress, forms, and decorative chrome — all using semantic colors (text-body-emphasis, bg-body-tertiary, border-secondary-subtle) so light and dark modes stay legible. Custom styles are scoped under .widget-showcase with wg-* helpers.

Dense UI · theme tokens · no legacy .widget classes

Pair these panels with your grid. Prefer data-bs-theme on :root (navbar toggle) and optional nested dark strips for previews.

Cards List group
Curated for contrast: headings use text-body-emphasis or theme emphasis; supporting copy uses text-body-secondary; surfaces use bg-body / tertiary — avoid hard-coded grays inside these panels.
Revenue +12%

$48.2k

vs last month

Active users Live

12,840

↑ 3.1% week over week

Churn Watch

2.4%

Goal < 2.0%

Uptime

99.98%

Last 90 days

Conic ring — swap for a chart lib in production.

Feed

Activity

Production deploy · v2.14.0 2 min ago · CI pipeline
Invoice #8842 paid 18 min ago · Stripe
API rate limit threshold 1 hr ago · Edge

Checklist

Today

Schedule

March 2026

MoTuWeThFrSaSu
2324252627281 2345678 9101112131415 16171819202122 23242526272829 3031

Decorative grid — wire to a date library as needed.

Location

Weather

18°

Berlin · partly cloudy

Now 18°
High 21°
Low 12°

Search

Global find

Recent

Q3 roadmap Design tokens On-call

Newsletter

Weekly product digest

One email · release notes, UI tips, and changelog highlights.

No spam — unsubscribe anytime.

Morgan Lee

Staff designer · Design systems

Message Profile
Projects 14
Reviews 128

Taxonomy

Popular tags

#bootstrap #tokens #a11y #dashboard #darkmode #figma #ship

Categories

Cards, list groups, and nav patterns for admin shells.

Spacing, type scale, and semantic color roles.

Inbox

Alerts stack

Markets

Watchlist

Delayed
Symbol Price Δ Vol
ELMT 142.06 +1.8% 2.1M
BS5 5.3.3 +0.2 —
CDN 99.2 −0.4% 840k
Page 1 of 4

Progress

Sprint burn

Stories closed

34 / 5068%

Points by lane

Design · Eng · QA

Roadmap

Timeline

Jan 2026

Alpha APIs

Feb 2026

Design partner cohort

Mar 2026

GA + pricing

“Ship small surfaces with strong tokens — widgets should survive theme flips without one-off hex values.”

Design ops · Elementer style guide

Preferences

Toggles

Browser push for mentions.

Upload

Assets

Drop files or browse

SVG, PNG, JPG up to 10 MB

Queue

hero-dark.png
tokens.json

Workspace

Summary metrics and ownership.

SLA99.9%
OwnerSRE

IDs, regions, and dependency graph — placeholder content.

  • Mar 28 — Config change approved
  • Mar 20 — Failover drill
  • Mar 02 — Launch review

Nav

Pills + breadcrumb

Loading

Placeholders

Async

Spinners

Pair with live regions for screen readers.

No items yet

Create a widget or import a template.

Feedback

Rating

Session quality

Use buttons + aria-pressed for real input.

Toast

Push preview

Fixed stack lives bottom-right of viewport.

Onboarding

Steps

  1. Account
    Email verified
    Done
  2. Workspace
    Pick a name
    Now
  3. Invite
    Optional
    Soon

Shortcuts

Quick links

Documentation Support Security Changelog

People

On-call

Alex R.Primary
Jordan K.Secondary
Sam T.Shadow

Escalation: #incidents · Pager rotation weekly.

Geo

Map slot

Embed Mapbox / Google Maps / Leaflet here.

123 Market St · Doors open 18:00 · Accessible entrance on side.

Hours

Office & contact

  • Mon–Fri09:00 – 17:00
  • Sat10:00 – 14:00
  • SunClosed

+1 (555) 123-4567

info@rolldomains.com

Nested theme

Dark-surface widget preview

Same Bootstrap utilities — text-secondary, border-secondary, and bg-body-tertiary follow this local data-bs-theme="dark" context.

Primary Light badge Dark chip
Status

All systems nominal

Latency p99 within SLO · last 24h.