gog-panel
A titled region of a page — a settings section, a dashboard area, a form group. Unlike gog-card it is a real landmark (role="region" named by its heading), it can collapse through the existing gog-collapsible primitive, and its surface is never itself a link: controls live inside a panel.
Import the component and the slot directives you use, then project a heading. The heading is what names the region — without one the panel is still a panel, it just has no accessible name.
import {
GogPanelFooterDirective,
GogPanelHeaderDirective,
PanelComponent,
} from '@guildofgleks/ui';
@Component({
// ...
imports: [PanelComponent, GogPanelHeaderDirective, GogPanelFooterDirective],
})The heading names the region, so a screen reader lists this section by name instead of announcing an unlabelled group.
<gog-panel size="md">
<h3 gogPanelHeader>Notifications</h3>
<p>
The heading names the region, so a screen reader lists this section by name instead of
announcing an unlabelled group.
</p>
</gog-panel>Both paint a surface, and the library ships them as two components because they answer different questions. The quickest test is about links:
gogCardLink. A panel is never a link — there is no gogPanelLink, because a region that is a link cannot hold the controls a panel exists to hold. role="group" so twenty of them do not bury the landmark list. The same three variants as gog-card, from the shared GogSurfaceVariant type — but elevated is the default here, because a page region is usually the raised thing on the page. size drives padding and the gap between rows on the same five-tier scale as every control.
Padding and the gap between rows follow size.
Padding and the gap between rows follow size.
Padding and the gap between rows follow size.
Same copy, every tier.
Same copy, every tier.
Same copy, every tier.
Same copy, every tier.
Same copy, every tier.
<div class="variants">
@for (variant of variants; track variant) {
<gog-panel [variant]="variant" size="md">
<h4 gogPanelHeader>{{ variant }}</h4>
<p>Padding and the gap between rows follow <code>size</code>.</p>
</gog-panel>
}
</div>
<div class="sizes">
@for (size of sizes; track size) {
<gog-panel [size]="size" variant="outlined">
<h4 gogPanelHeader>{{ size }}</h4>
<p>Same copy, every tier.</p>
</gog-panel>
}
</div>collapsible adds the toggle and composes gog-collapsible underneath, so the open/close state, the id wiring and the animation are the library's existing ones. The heading stays a heading: the toggle is a separate <button> named by it through aria-labelledby, with its hit area stretched across the header row — so the pointer still gets "click the title to collapse", while a screen reader gets a heading and a named expandable button rather than a heading swallowed by role="button". Without a header the toggle falls back to GOG_CONFIG.labels.togglePanel.
Closed to begin with — open is a model, so it binds both ways.
The toggle is aria-disabled and does nothing; the content stays readable.
<div class="stack">
<gog-panel [collapsible]="true" [(open)]="notificationsOpen" size="md">
<h4 gogPanelHeader>Notifications</h4>
<gog-checkbox label="Email digest" [(checked)]="emailDigest" />
<gog-checkbox label="Push alerts" [(checked)]="pushAlerts" />
<div gogPanelFooter>
<gog-button size="xsm" variant="outline">Reset</gog-button>
<gog-button size="xsm">Save</gog-button>
</div>
</gog-panel>
<gog-panel [collapsible]="true" [(open)]="securityOpen" size="md" variant="outlined">
<h4 gogPanelHeader>Security</h4>
<p>Closed to begin with — <code>open</code> is a model, so it binds both ways.</p>
</gog-panel>
<gog-panel [collapsible]="true" [(open)]="billingOpen" [disabled]="true" size="md">
<h4 gogPanelHeader>Billing (disabled)</h4>
<p>The toggle is <code>aria-disabled</code> and does nothing; the content stays readable.</p>
</gog-panel>
</div> A non-collapsible panel undoes the collapse geometry it inherits, overflow included, so a dropdown or menu opened inside one escapes the panel's box with nothing extra asked of you — the first select below.
A collapsible one does clip while it animates, exactly like gog-collapsible. That is the one trap on this page: reach for [appendToBody] on the overlay, as the second select does, and it renders into <body> instead of inside the clipped box.
<div class="stack">
<!--
Not collapsible: the panel undoes the collapse geometry it inherits, `overflow` included,
so this dropdown escapes the panel's box with nothing extra asked of you.
-->
<gog-panel size="md" variant="outlined">
<h4 gogPanelHeader>Regional</h4>
<gog-select label="Time zone" [options]="timezones" [(value)]="plain" />
</gog-panel>
<!--
Collapsible: this one *does* clip while it animates, exactly like gog-collapsible.
`appendToBody` renders the panel into <body>, which is what keeps it whole.
-->
<gog-panel [collapsible]="true" [(open)]="regionalOpen" size="md" variant="outlined">
<h4 gogPanelHeader>Regional, collapsible</h4>
<gog-select
label="Time zone"
[options]="timezones"
[appendToBody]="true"
[(value)]="inCollapsible"
/>
</gog-panel>
</div> The heading stays — a page section is titled before its content arrives, and blanking the title would move the layout twice — and only the body is replaced with skeletonLines placeholder lines. The footer stays too, so its actions remain usable. The host is marked aria-busy while it lasts.
Sixteen events since Tuesday, most of them from the nightly import.
<div class="stack">
<gog-button size="xsm" variant="outline" (gogClick)="toggle()">
{{ loading() ? 'Finish loading' : 'Load again' }}
</gog-button>
<gog-panel [loading]="loading()" [skeletonLines]="4" size="md">
<h4 gogPanelHeader>Activity</h4>
<p>Sixteen events since Tuesday, most of them from the nightly import.</p>
<div gogPanelFooter>
<gog-button size="xsm" variant="ghost">Export</gog-button>
</div>
</gog-panel>
</div> Every value comes from a --gog-panel-* token, and the instance tier is undeclared on purpose — setting one on an element beats the variant and size classes without a specificity fight, and without ::ng-deep. See Theming for the full list, and the note there about this prefix naming two different things.
Three tokens set from one class on the element. No ::ng-deep.
<gog-panel class="themed" size="md">
<h4 gogPanelHeader>Overridden per instance</h4>
<p>Three tokens set from one class on the element. No <code>::ng-deep</code>.</p>
</gog-panel>| Name | Type | Default | Description |
|---|---|---|---|
variant | GogSurfaceVariant | 'elevated' | 'outlined' | 'elevated' | 'filled'. Elevated is the default here, because a page region is usually the raised thing on the page. |
size | GogSize | 'lg' | Drives padding and the gap between the panel’s rows, on the five-tier scale. |
collapsible | boolean | false | Adds the toggle and composes gog-collapsible underneath. A bare attribute works. Note a collapsible panel clips while animating. |
disabled | boolean | false | Marks the toggle aria-disabled and stops it acting; the content stays readable. A bare attribute works. |
loading | boolean | false | Replaces the body with placeholder lines and sets aria-busy. The heading and footer stay put. |
skeletonLines | number | 3 | How many placeholder lines the loading body draws. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | true | Two-way bindable. Ignored while collapsible is off. Emits openChange, so [(open)] works. |
| Name | Description |
|---|---|
gogPanelHeader | Attribute directive on your own heading. Becomes the region’s accessible name and the toggle’s label. |
gogPanelFooter | Attribute directive on your own element. Sits below the body, above the panel’s edge, and survives loading. |
gog-panel shares its token prefix with the foundation surface tier on purpose: --gog-panel-radius, --gog-panel-shadow and the border pair are the same tokens dialogs and dropdown panels read, so a theme's idea of a raised surface reaches this component for free. Everything else below is the component's own family.
| Token | Description |
|---|---|
--gog-panel-radius / --gog-panel-shadow / --gog-panel-border-width / --gog-panel-border-style | Shared with the foundation surface tier — the same four tokens dialogs and dropdown panels read, so a theme’s idea of a raised surface reaches gog-panel for free. Setting them here restyles those surfaces too. |
--gog-panel-outlined-bg / -outlined-border-color / -outlined-shadow | The outlined variant: a border, no shadow. |
--gog-panel-elevated-bg / -elevated-border-color | The elevated variant (the default) — takes the shared surface shadow above. |
--gog-panel-filled-bg / -filled-border-color / -filled-shadow | The filled variant: a tint, neither border nor shadow. |
--gog-panel-color / --gog-panel-font-family | Body text color and font stack. |
--gog-panel-heading-color / -heading-font-family / -heading-font-size / -heading-font-weight / -heading-line-height | The projected gogPanelHeader heading. |
--gog-panel-header-gap | Gap between the heading and the collapse toggle. |
--gog-panel-toggle-size / -toggle-color / -toggle-hover-bg / -toggle-radius / --gog-panel-chevron-size | The collapse toggle button and its chevron. |
--gog-panel-footer-border-color / -footer-gap / -footer-padding-top | The projected gogPanelFooter row and the rule above it. |
--gog-panel-xsm-padding-y … --gog-panel-slg-padding-y (and -padding-x, -gap) | Padding and row gap per size tier, xsm through slg. |
--gog-panel-focus-ring / -focus-ring-width / -focus-ring-offset | Focus ring on the collapse toggle. |
--gog-panel-disabled-opacity / --gog-panel-transition-duration | Disabled dimming, and the collapse/hover transition. |