Widgets

Summary

The translucent card: Soma's basic content surface. In Soma's shell the page itself is a transparent tint (navbar and sidebar included); widgets are the only surfaces, which is what gives the dashboard its airy look. A widget is a header (title, optional subtitle) plus a body; compose freely (toolbars in the header, tables, charts and forms in the body) and place widgets with soma-col-* inside the 12-column grid. Every example on this page is itself a widget.

When to use

FormUse it for
.soma-widgetAny block of page content: dashboard tiles, detail panels, chart cards. The workhorse surface.
Header-less (body only)Self-titled content like stat tiles: the stat's own label does the naming.
.soma-widget-solidContent that must not let the page tint show through — dense imagery, embeds, editors.
Not a widgetInline notices (message/banner) and the single centred task card (soma-page-focused, see Page layout).

Examples

Block subtitle

A muted line under the title.

The standard anatomy: soma-widget-header with a title and an optional subtitle, then soma-widget-body with the content.

Inline subtitle runs on after the title

The same subtitle class nested inside the title, the Light Blue title idiom for short qualifiers.

Visits today 4,332 +14% vs last week
Sign-ups 312 +3% vs last week
Uptime 99.98% last 30 days

Composing

Chart container + legend in the body (demo placeholder):

  • Requests per hour

Solid variant

soma-widget-solid swaps the translucent surface for an opaque one — the page tint stops here. Use it when the content underneath must not shimmer through.

The three stat tiles above are header-less widgets placed with soma-col-4; the chart and solid cards split 8 / 4. Spans are the consumer's layout call.

HTML

<section class="soma-widget">
  <header class="soma-widget-header">
    <h3 class="soma-widget-title">Visits today</h3>
    <p class="soma-widget-subtitle">Compared to last week</p>
  </header>
  <div class="soma-widget-body">…</div>
</section>

<!-- placed in the grid -->
<div class="soma-grid">
  <section class="soma-widget soma-col-8">…</section>
  <section class="soma-widget soma-col-4">…</section>
</div>

Pick the title's heading level to fit the page outline; h3 under a page title is the usual shape.

CSS classes

ClassEffect
.soma-widgetThe card: translucent surface, soft shadow, rounded corners. Flex column, so bodies stretch in equal-height grid rows.
.soma-widget-headerPadded header strip; omit it for self-titled content.
.soma-widget-titleThe heading (h3 typically): large, semibold, no margin.
.soma-widget-subtitleMuted subtitle — a block <p> under the title, or a <span> inline inside it.
.soma-widget-bodyThe content area; extra bottom padding keeps Soma's airy proportions.
.soma-widget-solidOpaque variant, for content that must not let the page tint through.
.soma-col-1 … .soma-col-12Grid placement inside .soma-grid (see Page layout).

JavaScript

None. Widgets are pure CSS; behaviour belongs to the components composed inside them.