Skip to main content

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.

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.
+12%

$48.2k

vs last month

Live

12,840

↑ 3.1% week over week

Watch

2.4%

Goal < 2.0%

99.98%

Last 90 days

Conic ring — swap for a chart lib in production.

Today

March 2026

MoTuWeThFrSaSu
2324252627281 2345678 9101112131415 16171819202122 23242526272829 3031

Decorative grid — wire to a date library as needed.

Weather

18°

Berlin · partly cloudy

Now 18°
High 21°
Low 12°

Global find

Recent

Weekly product digest

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

No spam — unsubscribe anytime.

Morgan Lee

Staff designer · Design systems


Projects 14
Reviews 128

Popular tags


Categories

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

Spacing, type scale, and semantic color roles.

Alerts stack

Watchlist

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

Sprint burn

Stories closed

34 / 5068%

Points by lane

Design · Eng · QA

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

Toggles

Browser push for mentions.

Assets

Drop files or browse

SVG, PNG, JPG up to 10 MB

Queue

hero-dark.png
tokens.json

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

Pills + breadcrumb

Placeholders

Spinners

Loading
Loading

Pair with live regions for screen readers.

No items yet

Create a widget or import a template.

Rating

Session quality

Use buttons + aria-pressed for real input.

Push preview

Fixed stack lives bottom-right of viewport.

Steps

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

On-call

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

Escalation: #incidents · Pager rotation weekly.

Map slot

Embed Mapbox / Google Maps / Leaflet here.

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

Office & contact

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

+1 (555) 123-4567

info@rolldomains.com

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.