Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Sheet Table of ContentsPropertiesPropertyAttributeDescriptionTypeDefaultaria ariaSets ARIA attributes on the sheet dialog element for improved accessibility when the default aria-label is insufficient.type SheetAriaAttribute = {
  'aria-label'?: string;
  'role'?: string;
}undefinedbackground backgroundSets the background color of the sheet panel (canvas or surface).type SheetBackground =
'canvas'
'surface''canvas'disableBackdropClick disable-backdrop-clickWhen enabled, clicking the backdrop will not close the sheet.booleanfalsedismissButton dismiss-buttonShows a dismiss button in the sheet header so users can manually close it.booleantrueopen openControls whether the sheet panel slides in from the bottom and is visible to the user.booleanfalseEventsEventDescriptionTypedismiss Emitted when the user dismisses the sheet via the close button, backdrop click, or Escape key.CustomEvent<void>motionHiddenEnd Emitted after the sheet's close transition has fully completed and the panel is hidden.type SheetMotionHiddenEndEventDetail = TransitionEvent
CustomEvent<SheetMotionHiddenEndEventDetail>motionVisibleEnd Emitted after the sheet's open transition has fully completed and the panel is visible.type SheetMotionVisibleEndEventDetail = TransitionEvent
CustomEvent<SheetMotionVisibleEndEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="header"> Renders a header section above the content area.<slot> Default slot for the main content.CSS VariablesCSS VariableDescriptiondefaultValue--ref-p-sheet-pt Exposes the internally used padding-top of the Sheet as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Sheet.--ref-p-sheet-pb Exposes the internally used padding-bottom of the Sheet as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the bottom of the Sheet.--ref-p-sheet-px Exposes the internally used padding-inline of the Sheet as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Sheet.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%