Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Expansion-Panel Implementation

The sbb-expansion-panel is a component which acts as an expandable summary-details widget.

It can be used standalone or inside a sbb-accordion.

Slots

In order to correctly display the component, it must be used together with
a sbb-expansion-panel-header
and a sbb-expansion-panel-content;
the first will work as a state controller, the last will act as the expandable content.

These two components automatically fill the two available slots, named header and content.

<sbb-expansion-panel>
  <sbb-expansion-panel-header>This is the header.</sbb-expansion-panel-header>
  <sbb-expansion-panel-content>This is the content.</sbb-expansion-panel-content>
</sbb-expansion-panel>

States

The visibility of the content is controlled by the value of the expanded property.

<sbb-expansion-panel expanded> ... </sbb-expansion-panel>

The disabled state can be set using the self-named variable. In this state, the component can not be collapsed or expanded.

<sbb-expansion-panel disabled> ... </sbb-expansion-panel>

Style

The component has two background options (milk and white, which is the default) that can be set using the color variable.

<sbb-expansion-panel color="milk"> ... </sbb-expansion-panel>

It's also possible to display the sbb-expansion-panel without border by setting the borderless variable.

<sbb-expansion-panel borderless> ... </sbb-expansion-panel>

Using the titleLevel variable, it's possible to wrap the sbb-expansion-panel-header in a heading tag;
if it's unset, a <div> is used as a wrapper.

<sbb-expansion-panel level="4">
  <sbb-expansion-panel-header
    >This is the header, and it will be wrapped in a h4 tag.</sbb-expansion-panel-header
  >
  <sbb-expansion-panel-content>This is the content.</sbb-expansion-panel-content>
</sbb-expansion-panel>

Accessibility

When the sbb-expansion-panel-header and the sbb-expansion-panel-content are slotted into the component,
they both receive an id, if not set; then, the content's id is set as aria-controls attribute of the header,
and the header's id is set as aria-labelledby attribute on the content.

The expanded attribute is used to correctly set the aria-expanded attribute on the header
and the aria-hidden attribute on the content.

Properties

Name Attribute Privacy Type Default Description
titleLevel title-level public SbbTitleLevel | null | undefined Heading level; if unset, a div will be rendered.
color color public 'white' | 'milk' 'white' The background color of the panel.
expanded expanded public boolean false Whether the panel is expanded.
disabled disabled public boolean false Whether the panel is disabled, so its expanded state can't be changed.
borderless borderless public boolean false Whether the panel has no border.
disableAnimation disable-animation public boolean false Whether the animations should be disabled.

Events

Name Type Description Inherited From
willOpen CustomEvent<void> Emits whenever the sbb-expansion-panel starts the opening transition.
didOpen CustomEvent<void> Emits whenever the sbb-expansion-panel is opened.
willClose CustomEvent<void> Emits whenever the sbb-expansion-panel begins the closing transition.
didClose CustomEvent<void> Emits whenever the sbb-expansion-panel is closed.

Slots

Name Description
Use the unnamed slot to add a sbb-expansion-panel-header and a sbb-expansion-panel-content element.
Examples
Default
Milk
Borderless
Disabled
With Icon
With Slotted Icon
No Heading Tag
Expanded
Expanded Icon
Long Text
No Animation
HTML-Markup kopiert.
Playground
Header 1Content 1Header 2Content 2
Ohne Rahmen Nein Ja Farbe White Milk Disabled Nein Ja Hintergrund White Milk Iron Charcoal Black
Imprint Contact Cookie settings