The Panel and its subcomponents use the native HTML <div> element by default. PanelTitles are assigned the semantic heading element <h3> within the PanelHeading subcomponent. PanelDescriptions render as <p> and PanelActions accept Pluma Buttons, which are created with either the <button> or <a> element.

The Panel is simply a container with a grid layout and includes no inherent accessibility features such as ARIA attributes or roles, or keyboard handlers. Accessibility for interactive children, such as buttons placed in PanelActions, is handled by those individual components.

Heading level

PanelTitle defaults to <h3>. When using PanelTitle, verify the heading level is appropriate for its position in the page hierarchy. If the Panel is a top-level section, it may need a different heading level set with the level prop.

Never skip heading levels as this can disorient users who rely on headings for navigation with assistive technology.

Keyboard

table
Key	Function
`Enter`/`Space`	Simulates a click and activates a focused button.
`Tab`	Moves focus to the next focusable element.
`Shift`+`Tab`	Moves focus to the previous focusable element.

Panel

Structure

Heading level

Keyboard

On this page