npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103095443 → 4.0.0 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5096) hide show

package/build/docs/autogenerated/prompt/ix-content-header/readme.md ADDED Viewed

@@ -0,0 +1,2153 @@
+# ix-content-header
+## HTML Examples
+### Example: application-advanced
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application advanced example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconAlarmBell,
+        iconHome,
+        iconPiechart,
+        iconPlant,
+        iconNetworkDevice,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconAlarmBell,
+        iconHome,
+        iconPiechart,
+        iconPlant,
+        iconNetworkDevice,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+        <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-item home icon="home" active>Home</ix-menu-item>
+        <ix-menu-item icon="alarm-bell">Alarm</ix-menu-item>
+        <ix-menu-category icon="piechart" label="Analysis">
+          <ix-menu-item icon="plant">Plant</ix-menu-item>
+          <ix-menu-item icon="network-device">Network</ix-menu-item>
+        </ix-menu-category>
+        <ix-menu-settings></ix-menu-settings>
+        <ix-menu-about></ix-menu-about>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header
+          id="contentHeaderId"
+          header-title="Example home content"
+        ></ix-content-header>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      (async function () {
+        await window.customElements.whenDefined('ix-menu');
+        const menuItems = document.querySelectorAll('ix-menu-item');
+        function registerClickListener(itemElement) {
+          itemElement.addEventListener('click', () => {
+            for (const item of menuItems) {
+              item.removeAttribute('active');
+            }
+            itemElement.setAttribute('active', '');
+            document
+              .getElementById('contentHeaderId')
+              .setAttribute(
+                'header-title',
+                `Example ${itemElement.innerText.toLowerCase()} content`
+              );
+          });
+        }
+        for (const element of menuItems) {
+          registerClickListener(element);
+        }
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: application-app-switch
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application app switch example</title>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header name="Calculator App">
+        <placeholder-logo slot="logo"></placeholder-logo>
+        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+        </ix-dropdown-button>
+        <ix-avatar>
+          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+        </ix-avatar>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header slot="header" header-title="My Content Page">
+        </ix-content-header>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      const application = document.querySelector('ix-application');
+      application.appSwitchConfig = {
+        i18nAppSwitch: 'Switch to Application',
+        currentAppId: 'demo-app-2',
+        apps: [
+          {
+            id: 'demo-app-1',
+            name: 'Floor App',
+            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+            url: 'https://ix.siemens.io/',
+            description: 'Example description for Floor app',
+            target: '_self',
+          },
+          {
+            id: 'demo-app-2',
+            name: 'Calculator App',
+            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+            url: 'https://ix.siemens.io/',
+            description: 'Example description for Calculator app',
+            target: '_self',
+          },
+        ],
+      };
+    </script>
+    <script type="module">
+      import {
+        pulseOnElement,
+        waitForElement,
+        getElementPosition,
+      } from './utils.js';
+      pulseOnElement(() =>
+        document
+          .querySelector('ix-application-header')
+          .shadowRoot.querySelector('ix-icon-button.app-switch')
+      );
+    </script>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-application');
+        const menu = document.querySelector('ix-application');
+        menu.breakpoints = ['md'];
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: application-breakpoints
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application breakpoints example</title>
+  </head>
+  <body>
+    <ix-application application-name="Application name">
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+        </ix-dropdown-button>
+        <ix-avatar>
+          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+        </ix-avatar>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header slot="header" header-title="Choose breakpoint">
+        </ix-content-header>
+        <ix-radio-group id="radio-group" value="md">
+          <ix-radio value="sm" label="Small"></ix-radio>
+          <ix-radio value="md" label="Medium"></ix-radio>
+          <ix-radio value="lg" label="Large"></ix-radio>
+        </ix-radio-group>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      (async () => {
+        const validBreakpoints = new Set(['sm', 'md', 'lg']);
+        await globalThis.customElements.whenDefined('ix-application');
+        await globalThis.customElements.whenDefined('ix-radio-group');
+        const nav = document.querySelector('ix-application');
+        nav.breakpoints = ['md'];
+        const radioGroup = document.getElementById('radio-group');
+        radioGroup.addEventListener('valueChange', ({ detail }) => {
+          if (validBreakpoints.has(detail)) {
+            nav.breakpoints = [detail];
+          }
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: application
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Application example</title>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header name="My Application">
+        <div class="placeholder-logo" slot="logo"></div>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+      <ix-content>
+        <ix-content-header slot="header" header-title="My Content Page">
+        </ix-content-header>
+      </ix-content>
+    </ix-application>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-application');
+        const menu = document.querySelector('ix-application');
+        menu.breakpoints = ['md'];
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: content-header-no-back
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content header no back example</title>
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import {
+        iconPen,
+        iconTrashcan,
+        iconContextMenu,
+      } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconPen,
+        iconTrashcan,
+        iconContextMenu,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-content-header
+      variant="subtle-primary"
+      header-title="Content title"
+      header-subtitle="Subtitle"
+    >
+      <ix-icon-button icon="pen" variant="tertiary">
+        Button1
+      </ix-icon-button>
+      <ix-icon-button icon="trashcan" variant="tertiary">
+        Button2
+      </ix-icon-button>
+      <ix-icon-button icon="context-menu" variant="tertiary">
+        Button3
+      </ix-icon-button>
+    </ix-content-header>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: content-header-with-slot
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content header with header slot examples</title>
+    <link rel="stylesheet" href="./content-header-with-slot.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconInfo } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconInfo,
+      });
+    </script>
+  </head>
+  <body>
+    <div>
+      <ix-content-header
+        has-back-button
+        header-title="Content title"
+        header-subtitle="Subtitle"
+      >
+        <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
+        <ix-button ghost>Button1</ix-button>
+        <ix-button ghost>Button2</ix-button>
+        <ix-button ghost>Button3</ix-button>
+      </ix-content-header>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: content-header
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content header example</title>
+  </head>
+  <body>
+    <ix-content-header
+      has-back-button
+      header-title="Content title"
+      header-subtitle="Subtitle"
+    >
+      <ix-button variant="tertiary">Button1</ix-button>
+      <ix-button variant="tertiary">Button2</ix-button>
+      <ix-button variant="tertiary">Button3</ix-button>
+    </ix-content-header>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: content
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content example</title>
+  </head>
+  <body>
+    <ix-content>
+      <ix-content-header slot="header" header-title="My Content Page">
+      </ix-content-header>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-content>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-application');
+        const menu = document.querySelector('ix-application');
+        menu.breakpoints = ['md'];
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+## React Examples
+### Example: application-advanced
+```tsx
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxMenuCategory,
+  IxMenuItem,
+  IxMenuSettings,
+} from '@siemens/ix-react';
+import {
+  iconAlarmBell,
+  iconHome,
+  iconPiechart,
+  iconPlant,
+  iconNetworkDevice,
+} from '@siemens/ix-icons/icons';
+import { useState } from 'react';
+export default function ApplicationAdvancedExample() {
+  const [activeContent, setActiveContent] = useState('home');
+  return (
+    <IxApplication>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+        <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem
+          home
+          icon={iconHome}
+          onClick={() => setActiveContent('home')}
+          active={activeContent === 'home'}
+        >
+          Home
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconAlarmBell}
+          onClick={() => setActiveContent('alarm')}
+          active={activeContent === 'alarm'}
+        >
+          Alarm
+        </IxMenuItem>
+        <IxMenuCategory icon={iconPiechart} label="Analysis">
+          <IxMenuItem
+            icon={iconPlant}
+            onClick={() => setActiveContent('plant')}
+            active={activeContent === 'plant'}
+          >
+            Plant
+          </IxMenuItem>
+          <IxMenuItem
+            icon={iconNetworkDevice}
+            onClick={() => setActiveContent('network')}
+            active={activeContent === 'network'}
+          >
+            Network
+          </IxMenuItem>
+        </IxMenuCategory>
+        <IxMenuSettings></IxMenuSettings>
+        <IxMenuAbout></IxMenuAbout>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          headerTitle={`Example ${activeContent} content`}
+        ></IxContentHeader>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: application-app-switch
+```tsx
+import { AppSwitchConfiguration } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+const appSwitchConfig: AppSwitchConfiguration = {
+  i18nAppSwitch: 'Switch to Application',
+  currentAppId: 'demo-app-2',
+  apps: [
+    {
+      id: 'demo-app-1',
+      name: 'Floor App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Floor app',
+      target: '_self',
+    },
+    {
+      id: 'demo-app-2',
+      name: 'Calculator App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Calculator app',
+      target: '_self',
+    },
+  ],
+};
+export default () => {
+  return (
+    <IxApplication appSwitchConfig={appSwitchConfig}>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+        <IxDropdownButton variant="subtle-tertiary" label="Select config">
+          <IxDropdownItem label="Config 1"></IxDropdownItem>
+          <IxDropdownItem label="Config 2"></IxDropdownItem>
+          <IxDropdownItem label="Config 3"></IxDropdownItem>
+        </IxDropdownButton>
+        <IxAvatar>
+          <IxDropdownItem label="Action 1"></IxDropdownItem>
+          <IxDropdownItem label="Action 2"></IxDropdownItem>
+          <IxDropdownItem label="Action 3"></IxDropdownItem>
+        </IxAvatar>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          headerTitle="My Content Page"
+        ></IxContentHeader>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: application-breakpoints
+```tsx
+import { Breakpoint } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-react';
+import { useState } from 'react';
+const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+export default () => {
+  const [breakpoints, setBreakpoints] = useState<Breakpoint[]>(['md']);
+  const handleBreakpointChange = (event: CustomEvent<string>) => {
+    const value = event.detail;
+    if (validBreakpoints.has(value as Breakpoint)) {
+      setBreakpoints([value as Breakpoint]);
+    }
+  };
+  return (
+    <IxApplication breakpoints={breakpoints}>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+        <IxDropdownButton variant="subtle-tertiary" label="Select config">
+          <IxDropdownItem label="Config 1"></IxDropdownItem>
+          <IxDropdownItem label="Config 2"></IxDropdownItem>
+          <IxDropdownItem label="Config 3"></IxDropdownItem>
+        </IxDropdownButton>
+        <IxAvatar>
+          <IxDropdownItem label="Action 1"></IxDropdownItem>
+          <IxDropdownItem label="Action 2"></IxDropdownItem>
+          <IxDropdownItem label="Action 3"></IxDropdownItem>
+        </IxAvatar>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          headerTitle="Choose breakpoint"
+        ></IxContentHeader>
+        <IxRadioGroup
+          value={breakpoints[0]}
+          onValueChange={handleBreakpointChange}
+        >
+          <IxRadio value="sm" label="Small"></IxRadio>
+          <IxRadio value="md" label="Medium"></IxRadio>
+          <IxRadio value="lg" label="Large"></IxRadio>
+        </IxRadioGroup>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: application
+```tsx
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxApplication>
+      <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo" slot="logo"></div>
+      </IxApplicationHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+      <IxContent>
+        <IxContentHeader
+          slot="header"
+          headerTitle="My Content Page"
+        ></IxContentHeader>
+      </IxContent>
+    </IxApplication>
+  );
+};
+```
+### Example: content-header-no-back
+```tsx
+import {
+  iconContextMenu,
+  iconPen,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import { IxContentHeader, IxIconButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxContentHeader
+      variant="subtle-primary"
+      header-title="Content title"
+      header-subtitle="Subtitle"
+    >
+      <IxIconButton icon={iconPen} variant="tertiary">
+        Button1
+      </IxIconButton>
+      <IxIconButton icon={iconTrashcan} variant="tertiary">
+        Button2
+      </IxIconButton>
+      <IxIconButton icon={iconContextMenu} variant="tertiary">
+        Button3
+      </IxIconButton>
+    </IxContentHeader>
+  );
+};
+```
+### Example: content-header-with-slot
+```tsx
+import { IxButton, IxContentHeader, IxPill } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+import './content-header-with-slot.scoped.css';
+export default () => {
+  return (
+    <IxContentHeader
+      hasBackButton
+      headerTitle="Content title"
+      headerSubtitle="Subtitle"
+    >
+      <IxPill slot="header" icon={iconInfo} className="margin-top">
+        Label
+      </IxPill>
+      <IxButton ghost>Button1</IxButton>
+      <IxButton ghost>Button2</IxButton>
+      <IxButton ghost>Button3</IxButton>
+    </IxContentHeader>
+  );
+};
+```
+### Example: content-header
+```tsx
+import { IxButton, IxContentHeader } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxContentHeader
+      has-back-button
+      header-title="Content title"
+      header-subtitle="Subtitle"
+    >
+      <IxButton variant="tertiary">Button1</IxButton>
+      <IxButton variant="tertiary">Button2</IxButton>
+      <IxButton variant="tertiary">Button3</IxButton>
+    </IxContentHeader>
+  );
+};
+```
+### Example: content
+```tsx
+import { IxContent, IxContentHeader } from '@siemens/ix-react';
+export default () => {
+  return (
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        headerTitle="My Content Page"
+      ></IxContentHeader>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </IxContent>
+  );
+};
+```
+## Vue Examples
+### Example: application-advanced
+```tsx
+<script setup lang="ts">
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxMenuCategory,
+  IxMenuItem,
+  IxMenuSettings,
+} from '@siemens/ix-vue';
+import {
+  iconAlarmBell,
+  iconHome,
+  iconPiechart,
+  iconPlant,
+  iconNetworkDevice,
+} from '@siemens/ix-icons/icons';
+import { ref } from 'vue';
+const activeContent = ref('home');
+</script>
+<template>
+  <IxApplication>
+    <IxApplicationHeader name="My Application">
+      <div class="placeholder-logo" slot="logo"></div>
+      <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem
+        home
+        :icon="iconHome"
+        :active="activeContent === 'home'"
+        @click="activeContent = 'home'"
+        >Home</IxMenuItem
+      >
+      <IxMenuItem
+        :icon="iconAlarmBell"
+        :active="activeContent === 'alarm'"
+        @click="activeContent = 'alarm'"
+        >Alarm</IxMenuItem
+      >
+      <IxMenuCategory :icon="iconPiechart" label="Analysis">
+        <IxMenuItem
+          :icon="iconPlant"
+          :active="activeContent === 'plant'"
+          @click="activeContent = 'plant'"
+          >Plant</IxMenuItem
+        >
+        <IxMenuItem
+          :icon="iconNetworkDevice"
+          :active="activeContent === 'network'"
+          @click="activeContent = 'network'"
+          >Network</IxMenuItem
+        >
+      </IxMenuCategory>
+      <IxMenuSettings></IxMenuSettings>
+      <IxMenuAbout></IxMenuAbout>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        :header-title="`Example ${activeContent} content`"
+      ></IxContentHeader>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: application-app-switch
+```tsx
+<script setup lang="ts">
+import { AppSwitchConfiguration } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-vue';
+const appSwitchConfig: AppSwitchConfiguration = {
+  i18nAppSwitch: 'Switch to Application',
+  currentAppId: 'demo-app-2',
+  apps: [
+    {
+      id: 'demo-app-1',
+      name: 'Floor App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Floor app',
+      target: '_self',
+    },
+    {
+      id: 'demo-app-2',
+      name: 'Calculator App',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: 'Example description for Calculator app',
+      target: '_self',
+    },
+  ],
+};
+</script>
+<template>
+  <IxApplication :appSwitchConfig="appSwitchConfig">
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxAvatar>
+        <IxDropdownItem label="Action 1"></IxDropdownItem>
+        <IxDropdownItem label="Action 2"></IxDropdownItem>
+        <IxDropdownItem label="Action 3"></IxDropdownItem>
+      </IxAvatar>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        header-title="My Content Page"
+      ></IxContentHeader>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: application-breakpoints
+```tsx
+<script setup lang="ts">
+import type { Breakpoint } from '@siemens/ix';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-vue';
+</script>
+<script lang="ts">
+const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+export default {
+  data(): {
+    breakpoints: Breakpoint[];
+  } {
+    return {
+      breakpoints: ['md'],
+    };
+  },
+  methods: {
+    setBreakpoint(event: CustomEvent<Breakpoint>) {
+      const value = event?.detail;
+      if (validBreakpoints.has(value)) {
+        this.breakpoints = [value];
+      }
+    },
+  },
+};
+</script>
+<template>
+  <IxApplication :breakpoints="breakpoints">
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+      <IxDropdownButton variant="subtle-tertiary" label="Select config">
+        <IxDropdownItem label="Config 1"></IxDropdownItem>
+        <IxDropdownItem label="Config 2"></IxDropdownItem>
+        <IxDropdownItem label="Config 3"></IxDropdownItem>
+      </IxDropdownButton>
+      <IxAvatar>
+        <IxDropdownItem label="Action 1"></IxDropdownItem>
+        <IxDropdownItem label="Action 2"></IxDropdownItem>
+        <IxDropdownItem label="Action 3"></IxDropdownItem>
+      </IxAvatar>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        header-title="Choose breakpoint"
+      ></IxContentHeader>
+      <IxRadioGroup :value="breakpoints[0]" @valueChange="setBreakpoint">
+        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
+        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
+        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
+      </IxRadioGroup>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: application
+```tsx
+<script setup lang="ts">
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-vue';
+</script>
+<template>
+  <IxApplication>
+    <IxApplicationHeader name="My Application">
+      <div className="placeholder-logo" slot="logo"></div>
+    </IxApplicationHeader>
+    <IxMenu>
+      <IxMenuItem>Item 1</IxMenuItem>
+      <IxMenuItem>Item 2</IxMenuItem>
+    </IxMenu>
+    <IxContent>
+      <IxContentHeader
+        slot="header"
+        header-title="My Content Page"
+      ></IxContentHeader>
+    </IxContent>
+  </IxApplication>
+</template>
+```
+### Example: content-header-no-back
+```tsx
+<script setup lang="ts">
+import {
+  iconContextMenu,
+  iconPen,
+  iconTrashcan,
+} from '@siemens/ix-icons/icons';
+import { IxContentHeader, IxIconButton } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxContentHeader
+    variant="subtle-primary"
+    header-title="Content title"
+    header-subtitle="Subtitle"
+  >
+    <IxIconButton :icon="iconPen" variant="tertiary">
+      Button1
+    </IxIconButton>
+    <IxIconButton :icon="iconTrashcan" variant="tertiary">
+      Button2
+    </IxIconButton>
+    <IxIconButton :icon="iconContextMenu" variant="tertiary">
+      Button3
+    </IxIconButton>
+  </IxContentHeader>
+</template>
+```
+### Example: content-header-with-slot
+```tsx
+<script setup lang="ts">
+import { IxButton, IxContentHeader, IxPill } from '@siemens/ix-vue';
+import { iconInfo } from '@siemens/ix-icons/icons';
+</script>
+<style scoped src="./content-header-with-slot.css"></style>
+<template>
+  <IxContentHeader has-back-button header-title="Content title" header-subtitle="Subtitle">
+    <IxPill slot="header" :icon="iconInfo" class="margin-top">Label</IxPill>
+    <IxButton ghost>Button1</IxButton>
+    <IxButton ghost>Button2</IxButton>
+    <IxButton ghost>Button3</IxButton>
+  </IxContentHeader>
+</template>
+```
+### Example: content-header
+```tsx
+<script setup lang="ts">
+import { IxButton, IxContentHeader } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxContentHeader
+    has-back-button
+    header-title="Content title"
+    header-subtitle="Subtitle"
+  >
+    <IxButton variant="tertiary">Button1</IxButton>
+    <IxButton variant="tertiary">Button2</IxButton>
+    <IxButton variant="tertiary">Button3</IxButton>
+  </IxContentHeader>
+</template>
+```
+### Example: content
+```tsx
+<script setup lang="ts">
+import { IxContent, IxContentHeader } from '@siemens/ix-vue';
+</script>
+<template>
+  <IxContent>
+    <IxContentHeader
+      slot="header"
+      headerTitle="My Content Page"
+    ></IxContentHeader>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </IxContent>
+</template>
+```
+## Angular Examples
+### Example: application-advanced
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-example',
+  templateUrl: './application-advanced.html',
+  standalone: false,
+})
+export default class ApplicationAdvancedExample {
+  activeContent: string = 'home';
+  updateContent(contentKey: string) {
+    this.activeContent = contentKey;
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item
+      home
+      icon="home"
+      (click)="updateContent('home')"
+      [active]="activeContent === 'home'"
+      >Home</ix-menu-item
+    >
+    <ix-menu-item
+      icon="alarm-bell"
+      (click)="updateContent('alarm')"
+      [active]="activeContent === 'alarm'"
+      >Alarm</ix-menu-item
+    >
+    <ix-menu-category icon="piechart" label="Analysis">
+      <ix-menu-item
+        icon="plant"
+        (click)="updateContent('plant')"
+        [active]="activeContent === 'plant'"
+        >Plant</ix-menu-item
+      >
+      <ix-menu-item
+        icon="network-device"
+        (click)="updateContent('network')"
+        [active]="activeContent === 'network'"
+        >Network</ix-menu-item
+      >
+    </ix-menu-category>
+    <ix-menu-settings></ix-menu-settings>
+    <ix-menu-about></ix-menu-about>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-app-switch
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { AppSwitchConfiguration } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application-app-switch.html',
+})
+export default class ApplicationAppSwitchExample {
+  appSwitchConfig: AppSwitchConfiguration = {
+    i18nAppSwitch: 'Switch to Application',
+    currentAppId: 'demo-app-2',
+    apps: [
+      {
+        id: 'demo-app-1',
+        name: 'Floor App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Floor app',
+        target: '_self',
+      },
+      {
+        id: 'demo-app-2',
+        name: 'Calculator App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Calculator app',
+        target: '_self',
+      },
+    ],
+  };
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application [appSwitchConfig]="appSwitchConfig">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-breakpoints
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { Breakpoint } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application-breakpoints.html',
+})
+export default class ApplicationBreakpointExample {
+  breakpoints: Breakpoint[] = ['md'];
+  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+  onCheckedChange(value: string) {
+    const breakpoint = value as Breakpoint;
+    if (this.validBreakpoints.has(breakpoint)) {
+      this.breakpoints = [breakpoint];
+    }
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application application-name="Application name" [breakpoints]="breakpoints">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="Choose breakpoint">
+    </ix-content-header>
+    <ix-radio-group
+      [value]="breakpoints[0]"
+      (valueChange)="onCheckedChange($event.detail)"
+    >
+      <ix-radio value="sm" label="Small"></ix-radio>
+      <ix-radio value="md" label="Medium"></ix-radio>
+      <ix-radio value="lg" label="Large"></ix-radio>
+    </ix-radio-group>
+  </ix-content>
+</ix-application>
+```
+### Example: application
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './application.html',
+})
+export default class ApplicationExample {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: content-header-no-back
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './content-header-no-back.html',
+})
+export default class ContentHeaderNoBack {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  variant="subtle-primary"
+  headerTitle="Content title"
+  headerSubtitle="Subtitle"
+>
+  <ix-icon-button icon="pen" variant="tertiary"> Button1 </ix-icon-button>
+  <ix-icon-button icon="trashcan" variant="tertiary">
+    Button2
+  </ix-icon-button>
+  <ix-icon-button icon="context-menu" variant="tertiary">
+    Button3
+  </ix-icon-button>
+</ix-content-header>
+```
+### Example: content-header-with-slot
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-example',
+  templateUrl: './content-header-with-slot.html',
+  styleUrls: ['./content-header-with-slot.css'],
+  standalone: false,
+})
+export default class ContentHeaderWithSlot {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  has-back-button
+  header-title="Content title"
+  header-subtitle="Subtitle"
+>
+  <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
+  <ix-button ghost>Button1</ix-button>
+  <ix-button ghost>Button2</ix-button>
+  <ix-button ghost>Button3</ix-button>
+</ix-content-header>
+```
+### Example: content-header
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './content-header.html',
+})
+export default class ContentHeader {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  hasBackButton
+  headerTitle="Content title"
+  headerSubtitle="Subtitle"
+>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
+</ix-content-header>
+```
+### Example: content
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './content.html',
+})
+export default class ContentExample {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content>
+  <ix-content-header slot="header" header-title="My Content Page">
+  </ix-content-header>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</ix-content>
+```
+## Angular Standalone Examples
+### Example: application-advanced
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxMenuCategory,
+  IxMenuItem,
+  IxMenuSettings,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxAvatar,
+    IxContent,
+    IxContentHeader,
+    IxMenu,
+    IxMenuAbout,
+    IxMenuCategory,
+    IxMenuItem,
+    IxMenuSettings,
+  ],
+  templateUrl: './application-advanced.html',
+})
+export default class ApplicationAdvancedExample {
+  activeContent: string = 'home';
+  updateContent(contentKey: string) {
+    this.activeContent = contentKey;
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item
+      home
+      icon="home"
+      (click)="updateContent('home')"
+      [active]="activeContent === 'home'"
+      >Home</ix-menu-item
+    >
+    <ix-menu-item
+      icon="alarm-bell"
+      (click)="updateContent('alarm')"
+      [active]="activeContent === 'alarm'"
+      >Alarm</ix-menu-item
+    >
+    <ix-menu-category icon="piechart" label="Analysis">
+      <ix-menu-item
+        icon="plant"
+        (click)="updateContent('plant')"
+        [active]="activeContent === 'plant'"
+        >Plant</ix-menu-item
+      >
+      <ix-menu-item
+        icon="network-device"
+        (click)="updateContent('network')"
+        [active]="activeContent === 'network'"
+        >Network</ix-menu-item
+      >
+    </ix-menu-category>
+    <ix-menu-settings></ix-menu-settings>
+    <ix-menu-about></ix-menu-about>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-app-switch
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxAvatar,
+  IxMenu,
+  IxMenuItem,
+  IxContent,
+  IxContentHeader,
+} from '@siemens/ix-angular/standalone';
+import { AppSwitchConfiguration } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxAvatar,
+    IxMenu,
+    IxMenuItem,
+    IxContent,
+    IxContentHeader,
+  ],
+  templateUrl: './application-app-switch.html',
+})
+export default class ApplicationAppSwitchExample {
+  appSwitchConfig: AppSwitchConfiguration = {
+    i18nAppSwitch: 'Switch to Application',
+    currentAppId: 'demo-app-2',
+    apps: [
+      {
+        id: 'demo-app-1',
+        name: 'Floor App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Floor app',
+        target: '_self',
+      },
+      {
+        id: 'demo-app-2',
+        name: 'Calculator App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for Calculator app',
+        target: '_self',
+      },
+    ],
+  };
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application [appSwitchConfig]="appSwitchConfig">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: application-breakpoints
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxMenu,
+  IxMenuItem,
+  IxRadio,
+  IxRadioGroup,
+} from '@siemens/ix-angular/standalone';
+import { Breakpoint } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxDropdownButton,
+    IxDropdownItem,
+    IxAvatar,
+    IxMenu,
+    IxMenuItem,
+    IxContent,
+    IxContentHeader,
+    IxRadioGroup,
+    IxRadio,
+  ],
+  templateUrl: './application-breakpoints.html',
+})
+export default class ApplicationBreakpointExample {
+  breakpoints: Breakpoint[] = ['md'];
+  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
+  onCheckedChange(value: string) {
+    const breakpoint = value as Breakpoint;
+    if (this.validBreakpoints.has(breakpoint)) {
+      this.breakpoints = [breakpoint];
+    }
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application application-name="Application name" [breakpoints]="breakpoints">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="Choose breakpoint">
+    </ix-content-header>
+    <ix-radio-group
+      [value]="breakpoints[0]"
+      (valueChange)="onCheckedChange($event.detail)"
+    >
+      <ix-radio value="sm" label="Small"></ix-radio>
+      <ix-radio value="md" label="Medium"></ix-radio>
+      <ix-radio value="lg" label="Large"></ix-radio>
+    </ix-radio-group>
+  </ix-content>
+</ix-application>
+```
+### Example: application
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxContent,
+  IxContentHeader,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxMenu,
+    IxMenuItem,
+    IxContent,
+    IxContentHeader,
+  ],
+  templateUrl: './application.html',
+})
+export default class ApplicationExample {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header slot="header" header-title="My Content Page">
+    </ix-content-header>
+  </ix-content>
+</ix-application>
+```
+### Example: content-header-no-back
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxContentHeader, IxIconButton } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxContentHeader, IxIconButton],
+  templateUrl: './content-header-no-back.html',
+})
+export default class ContentHeaderNoBack {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  variant="subtle-primary"
+  headerTitle="Content title"
+  headerSubtitle="Subtitle"
+>
+  <ix-icon-button icon="pen" variant="tertiary"> Button1 </ix-icon-button>
+  <ix-icon-button icon="trashcan" variant="tertiary">
+    Button2
+  </ix-icon-button>
+  <ix-icon-button icon="context-menu" variant="tertiary">
+    Button3
+  </ix-icon-button>
+</ix-content-header>
+```
+### Example: content-header-with-slot
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import {
+  IxButton,
+  IxContentHeader,
+  IxPill,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxContentHeader, IxPill, IxButton],
+  templateUrl: './content-header-with-slot.html',
+  styleUrls: ['./content-header-with-slot.css'],
+})
+export default class ContentHeaderWithSlot {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  has-back-button
+  header-title="Content title"
+  header-subtitle="Subtitle"
+>
+  <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
+  <ix-button ghost>Button1</ix-button>
+  <ix-button ghost>Button2</ix-button>
+  <ix-button ghost>Button3</ix-button>
+</ix-content-header>
+```
+### Example: content-header
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxContentHeader, IxButton } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxContentHeader, IxButton],
+  templateUrl: './content-header.html',
+})
+export default class ContentHeader {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content-header
+  hasBackButton
+  headerTitle="Content title"
+  headerSubtitle="Subtitle"
+>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
+</ix-content-header>
+```
+### Example: content
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxContent, IxContentHeader } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxContent, IxContentHeader],
+  templateUrl: './content.html',
+})
+export default class ContentExample {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-content>
+  <ix-content-header slot="header" header-title="My Content Page">
+  </ix-content-header>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
+  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</ix-content>
+```
+<!-- Auto Generated Below -->
+## Properties
+| Property         | Attribute         | Description               | Type                       | Default     |
+| ---------------- | ----------------- | ------------------------- | -------------------------- | ----------- |
+| `hasBackButton`  | `has-back-button` | Display a back button     | `boolean`                  | `false`     |
+| `headerSubtitle` | `header-subtitle` | Subtitle of Header        | `string \| undefined`      | `undefined` |
+| `headerTitle`    | `header-title`    | Title of Header           | `string \| undefined`      | `undefined` |
+| `variant`        | `variant`         | Variant of content header | `"primary" \| "secondary"` | `'primary'` |
+## Events
+| Event             | Description                           | Type                |
+| ----------------- | ------------------------------------- | ------------------- |
+| `backButtonClick` | Triggered when back button is clicked | `CustomEvent<void>` |
+## Slots
+| Slot       | Description                                               |
+| ---------- | --------------------------------------------------------- |
+|            | Default slot for action buttons or other content          |
+| `"header"` | Content to be placed in the header area next to the title |
+## Dependencies
+### Depends on
+- [ix-icon-button](../icon-button)
+- [ix-typography](../typography)
+### Graph
+```mermaid
+graph TD;
+  ix-content-header --> ix-icon-button
+  ix-content-header --> ix-typography
+  ix-icon-button --> ix-spinner
+  style ix-content-header fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*