Scroll Panel

A bounded container with sticky header and footer slots that scrolls its body content when it overflows.

Props

height
string
Sets the height of the panel. Any valid CSS height value (e.g. "400px", "100%", "100vh"). Defaults to "100%". The parent element must establish a height context for "100%" to work.
testId
string
Sets a data-testid attribute for automated testing.
height
string
Sets the height of the panel. Any valid CSS height value (e.g. "400px", "100%", "100vh"). Defaults to "100%". The parent element must establish a height context for "100%" to work.
testId
string
Sets the data-testid attribute for automated testing.
height
string
Sets the height of the container. Any valid CSS height value (e.g. "400px", "100%", "100vh"). Defaults to "100%". The parent element must establish a height context for "100%" to work. The value is applied directly to the host element's style.
Defaults to 100%.
testid
string
Sets a data-testid attribute for automated testing.

ReactNode

footer
ReactNode
Content rendered in the sticky footer region.
header
ReactNode
Content rendered in the sticky header region.
footer
TemplateRef
Content rendered in the sticky footer region.
header
TemplateRef
Content rendered in the sticky header region.
footer
slot
Content rendered in the sticky footer region.
header
slot
Content rendered in the sticky header region.
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Related components

Drawer

A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.
Modal

An overlay that appears in front of all other content, and requires a user to take an action before continuing.
Push Drawer

A panel that pushes the main page content aside on desktop, falling back to an overlay drawer on smaller screens.
Notification Panel

A notification center panel that displays notification items within a work side menu, with tabs for filtering by unread, urgent, and all notifications.
View old component docs