UI Primitive: Panel

Live Primitive

This page is the code-bound reference for the shared panel shell. Variants are shown on a neutral surface so nesting artifacts do not get mistaken for primitive defects.

Live Variants

Each variant is rendered without an enclosing panel so the shared shell can be evaluated directly.

Panel Heading

Shared surface, border, radius, and padding with no extra layout behavior.

Action

Compact Panel

Use when the standard panel spacing is too loose but the same containment is still needed.

Editor Panel

Name

The editor variant keeps the same shell and adds stacked control spacing only.

Parent Panel

Use nested panels when a child group needs its own boundary inside a larger panel.

Nested Panel

The child panel should read as a subordinate surface without custom page-level compensation.

Panel Link

Use for dashboard and landing-page navigation panels where the panel dimensions should stay fixed.

Image Panel Link

Choose the image and any supporting light overlay at design time so the panel can keep the standard dark text treatment.

Image Panel Link: Contrast Override

Add the contrast modifier when the chosen image needs white text and a stronger dark overlay to stay legible.

Canonical Markup

Copy these snippets as the baseline implementation and avoid wrapping them in another panel unless the composition explicitly calls for nested surfaces.

Default

<div class="tagStudio__panel">
  <h4>Panel Heading</h4>
  <p>Panel body content goes here.</p>
</div>

Compact

<div class="tagStudio__panel tagStudio__panel--compact">
  <h4>Compact Panel</h4>
  <p>Use for denser supporting content.</p>
</div>

Editor

<div class="tagStudio__panel tagStudio__panel--editor">
  <label class="tagStudio__label" for="examplePanelInput">Name</label>
  <input class="tagStudio__input" id="examplePanelInput" type="text">
  <button class="tagStudio__button" type="button">Save</button>
</div>

Nested

<div class="tagStudio__panel">
  <h4>Parent Panel</h4>
  <p>Grouped content can include a subordinate panel when the child section needs its own containment.</p>
  <div class="tagStudio__panel tagStudio__panel--compact">
    <h4>Nested Panel</h4>
    <p>The nested panel should read as a secondary surface without page-local overrides.</p>
  </div>
</div>

Panel Link

<a class="tagStudio__panel tagStudio__panelLink" href="#">
  <h4>Panel Link</h4>
  <p>Use for static navigation content when the whole panel should behave as one fixed-height click target.</p>
</a>

Image Panel Link

<a
  class="tagStudio__panel tagStudio__panelLink tagStudio__panelLink--image"
  href="#"
  style="--panel-image: url('/assets/studio/img/panel-backgrounds/example-light.webp'); --panel-image-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.82) 100%);"
>
  <h4>Image Panel Link</h4>
  <p>Optional image fill for feature-entry panels that keep the site-default dark text treatment.</p>
</a>

Image Panel Link: Contrast Override

<a
  class="tagStudio__panel tagStudio__panelLink tagStudio__panelLink--image tagStudio__panelLink--imageContrast"
  href="#"
  style="--panel-image: url('/assets/studio/img/panel-backgrounds/example-dark.webp');"
>
  <h4>Image Panel Link: Contrast Override</h4>
  <p>Use the contrast override when the selected image needs white text and a stronger dark overlay.</p>
</a>

Notes

Implementation points only.

Editor Variant

tagStudio__panel--editor does not change the outer border, radius, or background. It only adds stacked internal layout via display: grid, gap, and align-content: start.
If an editor panel looks wrong, check the shell around it before adding page-local spacing fixes. The variant itself should remain a shell-plus-rhythm modifier only.

Nested Panels

Panel-inside-panel is a supported composition case for grouped subsections and should be tested in the primitive catalogue, not hidden by page-local fixes.
Direct nested child panels now inherit a subordinate surface treatment from the primitive itself so the inner group reads as secondary containment rather than a duplicate top-level card.
If nested panels still require local compensation on a page, treat that as evidence that the primitive contract is incomplete and fix the shared source or document a shared composition rule.

Compact Variant

tagStudio__panel--compact only reduces padding. Do not use it to solve layout issues caused by unrelated parent layout decisions.
When checking a compact or nested panel on a real page, look for double borders, unclear hierarchy, or cramped spacing and resolve those in the shared panel contract where possible.

Panel Link Variation

Use tagStudio__panel tagStudio__panelLink for static-content navigation panels where the whole panel is the click target.
This variation uses a fixed design-time height via --panel-link-height. Content should be edited to fit the panel, not vice versa.
Short copy discipline is part of the contract. Do not rely on auto-growing panel height to accommodate longer dashboard copy.
Use tagStudio__panelLink--image with --panel-image when a full-panel background image is needed. The image is decorative support for the fixed panel shell, not a reason to change the click or sizing behavior.
Background images for Studio panel links should be chosen at design time from assets/studio/img/panel-backgrounds/.
On Jekyll-rendered routes, keep the selected image width in shared page data such as _data/studio_panel_images.json rather than burying 800 or 1200 directly in the page markup.
Use a page-level default width plus optional per-panel width overrides in that data so each route can share a baseline without forcing every panel to use the same source size.
The filename convention for those assets is {asset_id}-{variant}-{width}.{format}, for example 01007-primary-800.webp.
The base image variant keeps the site-default dark text. Add tagStudio__panelLink--imageContrast when a darker image needs white text and a stronger overlay.
The image fill uses centered cover behavior, so small images are scaled up to fit and mismatched aspect ratios are cropped rather than stretched.

Design Guidance

Panel-link copy should wrap against the panel width itself. Do not add an internal text-measure cap that makes the copy look like it belongs to an invisible inner column.
For short-copy landing-page entry panels such as /studio/, prefer narrower centered columns rather than stretching the cards to fill the whole content area width.
For denser dashboard grids such as analytics/library/search, equal-fit grid tracks can still be appropriate as long as the panel height remains fixed and the copy stays short.
Include common design-led overrides in the code samples when they materially affect how the primitive is reused. The image-panel contrast override is part of the working reference, not supplementary commentary.