diff --git a/src/components/accordion/__snapshots__/accordion.spec.snap.js b/src/components/accordion/__snapshots__/accordion.spec.snap.js
index 9057d73271..57d12ab712 100644
--- a/src/components/accordion/__snapshots__/accordion.spec.snap.js
+++ b/src/components/accordion/__snapshots__/accordion.spec.snap.js
@@ -2,16 +2,18 @@
 export const snapshots = {};
 
 snapshots["sbb-accordion renders - Dom"] = 
-`<sbb-accordion>
+`<sbb-accordion size="l">
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-first=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-1"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-1"
@@ -24,6 +26,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-1"
+      data-size="l"
       id="sbb-expansion-panel-content-1"
       role="region"
       slot="content"
@@ -34,12 +37,14 @@ snapshots["sbb-accordion renders - Dom"] =
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-last=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-2"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-2"
@@ -52,6 +57,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-2"
+      data-size="l"
       id="sbb-expansion-panel-content-2"
       role="region"
       slot="content"
diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
index f642f79519..a01e2ff39c 100644
--- a/src/components/accordion/accordion.e2e.ts
+++ b/src/components/accordion/accordion.e2e.ts
@@ -46,9 +46,15 @@ describe(`sbb-accordion ${fixture.name}`, () => {
 
     expect(panels[0]).to.have.attribute('data-accordion-first');
     expect(panels[0]).to.have.attribute('data-accordion');
+    expect(panels[0]).to.have.attribute('size');
+    expect(panels[0].size).to.be.equal('l');
     expect(panels[1]).to.have.attribute('data-accordion');
+    expect(panels[1]).to.have.attribute('size');
+    expect(panels[1].size).to.be.equal('l');
     expect(panels[2]).to.have.attribute('data-accordion');
     expect(panels[2]).to.have.attribute('data-accordion-last');
+    expect(panels[2]).to.have.attribute('size');
+    expect(panels[2].size).to.be.equal('l');
   });
 
   it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => {
@@ -108,6 +114,16 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     ).to.be.equal('h6');
   });
 
+  it('should dynamically update size prop', async () => {
+    element.size = 's';
+    await waitForLitRender(element);
+    const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
+    expect(panels.length).to.be.equal(3);
+    expect(panels[0].size).to.be.equal('s');
+    expect(panels[1].size).to.be.equal('s');
+    expect(panels[2].size).to.be.equal('s');
+  });
+
   it('should close others when expanding and multi = false', async () => {
     const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
     const panelOne: SbbExpansionPanelElement =
diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
index 6e72ca02d8..a8785ea0a4 100644
--- a/src/components/accordion/accordion.stories.ts
+++ b/src/components/accordion/accordion.stories.ts
@@ -43,6 +43,16 @@ const titleLevel: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['l', 's'],
+  table: {
+    category: 'Accordion',
+  },
+};
+
 const color: InputType = {
   control: {
     type: 'inline-radio',
@@ -111,6 +121,7 @@ const defaultArgTypes: ArgTypes = {
   numberOfPanels,
   multi,
   'title-level': titleLevel,
+  size,
   color,
   expanded,
   borderless,
@@ -124,6 +135,7 @@ const defaultArgs: Args = {
   numberOfPanels: 3,
   multi: false,
   'title-level': titleLevel.options![2],
+  size: size.options![0],
   color: color.options![0],
   expanded: false,
   borderless: false,
@@ -215,6 +227,18 @@ export const Multi: StoryObj = {
   args: { ...defaultArgs, multi: true },
 };
 
+export const SizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+};
+
+export const SizeSWithIcon: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1], iconName: 'swisspass-medium' },
+};
+
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
index 16160f08b4..4705073907 100644
--- a/src/components/accordion/accordion.ts
+++ b/src/components/accordion/accordion.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -44,6 +44,9 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _multi: boolean = false;
 
+  /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
+  @property({ reflect: true }) public size: 's' | 'l' = 'l';
+
   private _abort = new SbbConnectedAbortController(this);
 
   private _closePanels(e: CustomEvent): void {
@@ -87,10 +90,17 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('size')) {
+      this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size));
+    }
+  }
+
   private _handleSlotchange(): void {
     this._expansionPanels.forEach(
       (panel: SbbExpansionPanelElement, index: number, array: SbbExpansionPanelElement[]) => {
         panel.titleLevel = this.titleLevel;
+        panel.size = this.size;
         panel.toggleAttribute('data-accordion-first', index === 0);
         panel.toggleAttribute('data-accordion-last', index === array.length - 1);
       },
diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md
index b480fd51e4..fc18e8f4d8 100644
--- a/src/components/accordion/readme.md
+++ b/src/components/accordion/readme.md
@@ -24,6 +24,13 @@ The `multi` property, if set, allows having more than one `sbb-expansion-panel`
 
 ## Style
 
+The component has two different sizes, `l` (default) and `s`, which can be changed using the `size` property.
+The property overrides the `size` value of any inner `sbb-expansion-panel`.
+
+```html
+<sbb-accordion size="s"> ... </sbb-accordion>
+```
+
 The component has a `titleLevel` property, which is proxied to each inner `sbb-expansion-panel-header`, and can be used
 to wrap the header of each `sbb-expansion-panel` in a heading tag; if the property is unset, a `div` is used.
 
@@ -43,10 +50,11 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 
 ## Properties
 
-| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                 |
-| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
-| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
-| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
+| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                               |
+| ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component.               |
+| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.                   |
+| `size`       | `size`        | public  | `'s' \| 'l'`            | `'l'`   | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. ` |
 
 ## Slots
 
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
index 0aa89537f2..5b1dab7573 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
@@ -12,6 +12,10 @@
   display: block;
 }
 
+:host([data-size='s']) {
+  --sbb-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-5x);
+}
+
 :host([data-icon-space]) {
   @include sbb.mq($from: micro) {
     // The space taken by the icon in the sbb-expansion-panel-header must be considered here to correctly calculate the padding value;
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
index eca77f8c70..9e8ef8bee1 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
@@ -17,6 +17,12 @@
   display: block;
 }
 
+:host([data-size='s']) {
+  --sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x);
+}
+
 :host([disabled]) {
   --sbb-expansion-panel-header-cursor: default;
   --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);
diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
index 6176040829..b9a6e42f89 100644
--- a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
+++ b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
@@ -2,12 +2,13 @@
 export const snapshots = {};
 
 snapshots["sbb-expansion-panel renders Dom"] = 
-`<sbb-expansion-panel>
+`<sbb-expansion-panel size="l">
   <sbb-expansion-panel-header
     aria-controls="sbb-expansion-panel-content-1"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
     id="sbb-expansion-panel-header-1"
@@ -20,6 +21,7 @@ snapshots["sbb-expansion-panel renders Dom"] =
   <sbb-expansion-panel-content
     aria-hidden="true"
     aria-labelledby="sbb-expansion-panel-header-1"
+    data-size="l"
     id="sbb-expansion-panel-content-1"
     role="region"
     slot="content"
@@ -47,15 +49,19 @@ snapshots["sbb-expansion-panel renders ShadowDom"] =
 /* end snapshot sbb-expansion-panel renders ShadowDom */
 
 snapshots["sbb-expansion-panel renders with level set Dom"] = 
-`<sbb-expansion-panel title-level="4">
+`<sbb-expansion-panel
+  size="l"
+  title-level="4"
+>
   <sbb-expansion-panel-header
-    aria-controls="sbb-expansion-panel-content-3"
+    aria-controls="sbb-expansion-panel-content-5"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
-    id="sbb-expansion-panel-header-3"
+    id="sbb-expansion-panel-header-5"
     role="button"
     slot="header"
     tabindex="0"
@@ -64,8 +70,9 @@ snapshots["sbb-expansion-panel renders with level set Dom"] =
   </sbb-expansion-panel-header>
   <sbb-expansion-panel-content
     aria-hidden="true"
-    aria-labelledby="sbb-expansion-panel-header-3"
-    id="sbb-expansion-panel-content-3"
+    aria-labelledby="sbb-expansion-panel-header-5"
+    data-size="l"
+    id="sbb-expansion-panel-content-5"
     role="region"
     slot="content"
   >
@@ -123,3 +130,50 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
 `;
 /* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
 
+snapshots["sbb-expansion-panel renders size s Dom"] = 
+`<sbb-expansion-panel size="s">
+  <sbb-expansion-panel-header
+    aria-controls="sbb-expansion-panel-content-3"
+    aria-expanded="false"
+    data-action=""
+    data-button=""
+    data-size="s"
+    data-slot-names="unnamed"
+    dir="ltr"
+    id="sbb-expansion-panel-header-3"
+    role="button"
+    slot="header"
+    tabindex="0"
+  >
+    Header
+  </sbb-expansion-panel-header>
+  <sbb-expansion-panel-content
+    aria-hidden="true"
+    aria-labelledby="sbb-expansion-panel-header-3"
+    data-size="s"
+    id="sbb-expansion-panel-content-3"
+    role="region"
+    slot="content"
+  >
+    Content
+  </sbb-expansion-panel-content>
+</sbb-expansion-panel>
+`;
+/* end snapshot sbb-expansion-panel renders size s Dom */
+
+snapshots["sbb-expansion-panel renders size s ShadowDom"] = 
+`<div class="sbb-expansion-panel">
+  <div class="sbb-expansion-panel__header">
+    <slot name="header">
+    </slot>
+  </div>
+  <div class="sbb-expansion-panel__content-wrapper">
+    <span class="sbb-expansion-panel__content">
+      <slot name="content">
+      </slot>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-expansion-panel renders size s ShadowDom */
+
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
index 5fd7ae4da6..46bea0259f 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
@@ -39,11 +39,13 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header).to.have.attribute('id', 'sbb-expansion-panel-header-2');
     expect(header).to.have.attribute('aria-controls', 'sbb-expansion-panel-content-2');
     expect(header).to.have.attribute('data-icon');
+    expect(header).to.have.attribute('data-size', 'l');
 
     const content = element.querySelector('sbb-expansion-panel-content');
     expect(content).to.have.attribute('id', 'sbb-expansion-panel-content-2');
     expect(content).to.have.attribute('aria-labelledby', `sbb-expansion-panel-header-2`);
     expect(content).to.have.attribute('data-icon-space');
+    expect(content).to.have.attribute('data-size', 'l');
   });
 
   it('has slotted elements with the correct properties when id are set', async () => {
@@ -130,4 +132,23 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header.disabled).to.be.equal(false);
     expect(header).not.to.have.attribute('aria-disabled');
   });
+
+  it('size property is proxied to children', async () => {
+    const header: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('sbb-expansion-panel-header')!;
+    const content: SbbExpansionPanelContentElement =
+      element.querySelector<SbbExpansionPanelContentElement>('sbb-expansion-panel-content')!;
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+
+    element.size = 's';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 's');
+    expect(content).to.have.attribute('data-size', 's');
+
+    element.size = 'l';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+  });
 });
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
index 188af155e6..01d8cbc3e8 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.scss
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
@@ -33,6 +33,10 @@
   display: block;
 }
 
+:host([size='s']) {
+  --sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x);
+}
+
 :host([disabled]) {
   @include sbb.if-forced-colors {
     --sbb-expansion-panel-border-color: GrayText;
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
index a84abd6b8c..4b0c4eac77 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
@@ -31,6 +31,27 @@ describe(`sbb-expansion-panel`, () => {
     });
   });
 
+  describe('renders size s', () => {
+    let element: SbbExpansionPanelElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-expansion-panel size="s">
+          <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
+          <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
+        </sbb-expansion-panel>
+      `);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
   describe('renders with level set', () => {
     let element: SbbExpansionPanelElement;
 
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
index 9dfe4e7e71..c0220faa6b 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
@@ -85,6 +85,13 @@ const disabled: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['l', 's'],
+};
+
 const defaultArgTypes: ArgTypes = {
   headerText,
   iconName,
@@ -94,6 +101,7 @@ const defaultArgTypes: ArgTypes = {
   color,
   borderless,
   disabled,
+  size,
 };
 
 const defaultArgs: Args = {
@@ -105,6 +113,7 @@ const defaultArgs: Args = {
   color: color.options![0],
   borderless: false,
   disabled: false,
+  size: size.options![0],
 };
 
 const Template = ({ headerText, iconName, contentText, ...args }: Args): TemplateResult => html`
@@ -191,6 +200,18 @@ export const LongText: StoryObj = {
   args: { ...defaultArgs, headerText: longText, contentText: longText },
 };
 
+export const SizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+};
+
+export const SizeSWithIcon: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1], iconName: 'swisspass-medium' },
+};
+
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.ts
index ca91fde478..0e1ce5b20e 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
@@ -65,6 +65,9 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   /** Whether the panel has no border. */
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
+  /** Size variant, either l or s. */
+  @property({ reflect: true }) public size: 's' | 'l' = 'l';
+
   /** Emits whenever the `sbb-expansion-panel` starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(
     this,
@@ -124,8 +127,14 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('toggleExpanded', () => this._toggleExpanded(), { signal });
-    const accordion = this.closest?.('sbb-accordion');
-    this.toggleAttribute('data-accordion', !!accordion);
+    this.toggleAttribute('data-accordion', !!this.closest?.('sbb-accordion'));
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('size')) {
+      this._headerRef?.setAttribute('data-size', String(this.size));
+      this._contentRef?.setAttribute('data-size', String(this.size));
+    }
   }
 
   public override disconnectedCallback(): void {
@@ -149,10 +158,12 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
       header.id ||= `sbb-expansion-panel-header${this._progressiveId}`;
       header.setAttribute('aria-expanded', String(this.expanded));
       header.toggleAttribute('disabled', this.disabled);
+      header.setAttribute('data-size', String(this.size));
     }
     if (content && this._contentRef !== content) {
       content.id ||= `sbb-expansion-panel-content${this._progressiveId}`;
       content.setAttribute('aria-hidden', String(!this.expanded));
+      content.setAttribute('data-size', String(this.size));
     }
 
     this._headerRef = header;
@@ -206,6 +217,7 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
         </div>
       </div>
     `;
+    /* eslint-enable lit/binding-positions */
   }
 }
 
diff --git a/src/components/expansion-panel/expansion-panel/readme.md b/src/components/expansion-panel/expansion-panel/readme.md
index 4982baf02f..1f6f3ad06b 100644
--- a/src/components/expansion-panel/expansion-panel/readme.md
+++ b/src/components/expansion-panel/expansion-panel/readme.md
@@ -40,6 +40,13 @@ The component has two background options (`milk` and `white`, which is the defau
 <sbb-expansion-panel color="milk"> ... </sbb-expansion-panel>
 ```
 
+The component has two different sizes, `l` (default) and `s`, which can be changed using the `size` property.
+The property is overridden when the component is used within a `sbb-accordion`.
+
+```html
+<sbb-expansion-panel size="s"> ... </sbb-expansion-panel>
+```
+
 It's also possible to display the `sbb-expansion-panel` without border by setting the `borderless` variable.
 
 ```html
@@ -78,6 +85,7 @@ and the `aria-hidden` attribute on the content.
 | `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.                                       |
+| `size`       | `size`        | public  | `'s' \| 'l'`                         | `'l'`     | Size variant, either l or s.                                           |
 
 ## Events