Stable

Panel

A structural container to group content into sections (settings, dashboard, filters). The opposite of a card: flat, bordered, dense — no shadow, no hover lift. Sub-elements: head / body / foot.

1 · Base

index.html
<div class="ng-panel">
    <div class="ng-panel-head">
        <span class="ng-panel-title">Settings</span>
        <i class="ph ph-gear"></i>
    </div>
    <div class="ng-panel-body">Structural container to group content into sections.</div>
    <div class="ng-panel-foot">
        <button class="ng-btn ng-btn-primary ng-btn-sm">Save</button>
    </div>
</div>
Live preview
Settings
Structural container to group content into sections.

2 · Brand header band

Add .ng-panel-<color> to tint the header from a brand token (all 18 color tokens, light + dark).

index.html
<div class="ng-panel ng-panel-primary">
    <div class="ng-panel-head"><span class="ng-panel-title">Primary</span></div>
    <div class="ng-panel-body">Header band from the brand token.</div>
</div>
Live preview
Primary
Brand header band.
Success
From $ng-colors.

3 · Collapsible

.ng-panel-collapsible reuses ng_toggle.js (no new JS): the head is the trigger (data-ng-toggle="#id"), the body sits inside a .ng-collapse with that id. Add is-open to start open.

index.html
<div class="ng-panel ng-panel-collapsible">
    <div class="ng-panel-head" data-ng-toggle="#p1">
        <span class="ng-panel-title">Collapsible section</span>
        <i class="ng-panel-toggle-icon ph ph-caret-down"></i>
    </div>
    <div class="ng-collapse is-open" id="p1">
        <div class="ng-panel-body">The head is the trigger; the icon rotates on aria-expanded.</div>
    </div>
</div>
Live preview
Collapsible section
The head is the trigger; the icon rotates on aria-expanded.

Reference

Structure

.ng-panel.ng-panel-head.ng-panel-title.ng-panel-body.ng-panel-foot

Variants

.ng-panel-<color>.ng-panel-flat.ng-panel-sm.ng-panel-lg.ng-panel-collapsible

SCSS-only. The collapsible variant needs ng_toggle.js; radius is md via fallback-at-use.