diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 5b5f7ab405..cbe5eebdea 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -13,6 +13,8 @@ import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
+export const SourceDarkMode = true;
+
 const preview: Preview = {
   parameters: {
     options: {
@@ -56,6 +58,7 @@ const preview: Preview = {
       },
       source: {
         excludeDecorators: true,
+        dark: SourceDarkMode,
         transform: (snippet: string) => format(snippet, prettierOptions),
       },
       components: resetComponents,
diff --git a/packages/documentation/src/shared/styles-package-import-individual.sample.ts b/packages/documentation/src/shared/styles-package-import-individual.sample.ts
new file mode 100644
index 0000000000..74e983a968
--- /dev/null
+++ b/packages/documentation/src/shared/styles-package-import-individual.sample.ts
@@ -0,0 +1,25 @@
+interface Props {
+  components: string[];
+  required?: { icons: boolean; floatingLabel: boolean; formFeedback: boolean };
+}
+
+const requiredLabels: { [key: string]: string } = {
+  'icons': 'required if you use icons',
+  'floating-label': 'required if you use floating-labels',
+  'form-feedback': 'required if you use validation feedbacks',
+};
+
+export function getStylesPackageImportIndividual(props: Props) {
+  const basics = `@use '@swisspost/design-system-styles/basics.scss';`;
+  const generateComponentLine = (name: string) =>
+    `@use '@swisspost/design-system-styles/components/${name}.scss';`;
+  const components = props.components.map(generateComponentLine).join('\n');
+
+  const required = Object.keys(props?.required || {}).reduce(
+    (acc: string, curr: string) =>
+      `${acc}\n// ${requiredLabels[curr]}\n${generateComponentLine(curr)}`,
+    '',
+  );
+
+  return `${basics}\n${components}\n${required}`;
+}
diff --git a/packages/documentation/src/shared/styles-package-import.mdx b/packages/documentation/src/shared/styles-package-import.mdx
new file mode 100644
index 0000000000..2b03422dc4
--- /dev/null
+++ b/packages/documentation/src/shared/styles-package-import.mdx
@@ -0,0 +1,20 @@
+import { Source } from '@storybook/blocks';
+import { getStylesPackageImportIndividual } from './styles-package-import-individual.sample';
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+<Source
+  code={`
+@use '@swisspost/design-system-styles/index.scss';
+  `}
+  language="scss"
+/>
+
+To import only the styles required for this component:
+
+<Source
+  code={getStylesPackageImportIndividual(props)}
+  language="scss"
+/>
diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index e037c041aa..571d0a110a 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as AlertStories from './alert.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={AlertStories} />
 
@@ -16,20 +17,7 @@ By default, alerts are rendered with a contextually appropriate icon.
 <Canvas of={AlertStories.Default} />
 <Controls of={AlertStories.Default} />
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/alert.scss';
-```
+<StylesPackageImport components={["alert"]} />
 
 ## Specific examples of application
 
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index 92fb95f735..0dd744831d 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as badgeStories from './badge.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={badgeStories} />
 
@@ -14,20 +15,7 @@ import * as badgeStories from './badge.stories';
   <Controls of={badgeStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/badge.scss';
-```
+<StylesPackageImport components={["badge"]} />
 
 ## Examples
 
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
index 7a32ef7d88..bb51e8707e 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
@@ -1,13 +1,15 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as BlockquoteStories from './blockquote.stories.ts';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={BlockquoteStories} />
 
 # Blockquote
 
 <div className="lead">
-  For quoting blocks of content from another source within your document. Wrap `<blockquote
-  class="blockquote">` around any HTML as the quote.
+  For quoting blocks of content from another source within your document. Wrap `
+  <blockquote
+    class="blockquote">` around any HTML as the quote.
 </div>
 
 <Canvas of={BlockquoteStories.Default} />
@@ -16,20 +18,7 @@ import * as BlockquoteStories from './blockquote.stories.ts';
   <Controls of={BlockquoteStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/blockquote.scss';
-```
+<StylesPackageImport components={["blockquote"]} />
 
 ## Concrete Examples of Application
 
@@ -37,6 +26,7 @@ The following examples show the different characteristics of the component. Thes
 
 ### Nested
 
-To add simple quote characters around any nested text within your blockquote, you can wrap it with a <code>&lt;q&gt;</code> tag.
+To add simple quote characters around any nested text within your blockquote, you can wrap it with a
+<code>&lt;q&gt;</code> tag.
 
 <Canvas of={BlockquoteStories.Nested} />
diff --git a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
index fce158e002..9387e0206f 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
+++ b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as ButtonGroupStories from './button-group.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={ButtonGroupStories} />
 
@@ -14,20 +15,7 @@ import * as ButtonGroupStories from './button-group.stories';
   <Controls of={ButtonGroupStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/badge.scss';
-```
+<StylesPackageImport components={["button-group"]} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 613d91d1ee..e146b17c05 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as ButtonStories from './button.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={ButtonStories} />
 
@@ -16,23 +17,7 @@ import * as ButtonStories from './button.stories';
   <Controls of={ButtonStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/button.scss';
-
-// required if you use icons
-@use '@swisspost/design-system-styles/components/icons.scss';
-```
+<StylesPackageImport components={["button"]} required={{ icons: true }} />
 
 ## Concrete Examples of Application
 
@@ -40,7 +25,9 @@ The following examples show the different characteristics of the component. Thes
 
 ### Inverted
 
-Inverted buttons don't need special classes anymore, just use any of the <LinkTo kind="utilities-background" story="docs">background classes</LinkTo> to set the background and you're done for the day.
+Inverted buttons don't need special classes anymore, just use any of the
+<LinkTo kind="utilities-background" story="docs">background
+  classes</LinkTo> to set the background and you're done for the day.
 
 <Canvas of={ButtonStories.Inverted} />
 
diff --git a/packages/documentation/src/stories/components/card/card.docs.mdx b/packages/documentation/src/stories/components/card/card.docs.mdx
index 3a4283b0c3..67ad1b5c3a 100644
--- a/packages/documentation/src/stories/components/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/card/card.docs.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as CardStories from './card.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import LinkTo from '@storybook/addon-links/react';
 
 <Meta of={CardStories} />
 
@@ -14,27 +15,15 @@ Built with flexbox, they offer easy alignment and mix well with other components
 
 They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
 This is easily customizable using the grid for example,
-for more details read our <LinkTo kind="foundations-layout" story="docs">layout docs</LinkTo>.
+for more details read our
+<LinkTo kind="foundations-layout" story="docs">layout docs</LinkTo>.
 
-<Canvas of={CardStories.Default}/>
+<Canvas of={CardStories.Default} />
 <div className="hide-col-default">
   <Controls of={CardStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/card.scss';
-```
+<StylesPackageImport components={["card"]} />
 
 ## Examples
 
@@ -60,7 +49,8 @@ Use card groups to render cards as a single, attached element with equal width a
 ### Bad example
 
 <div className="alert alert-danger mb-3">
-  Never use text with a background image because you can't ensure it is readable by everyone for all languages and browser sizes.
+  Never use text with a background image because you can't ensure it is readable by everyone for all languages and
+  browser sizes.
 </div>
 
 <Canvas of={CardStories.BackgroundImage} />
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
index f5bb6aed38..4b57853df7 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as checkboxStories from './checkbox.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={checkboxStories} />
 
@@ -17,23 +18,7 @@ Our checkboxes use custom icons to indicate checked or indeterminate states.
   <Controls of={checkboxStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```css
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```css
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/form-check.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["form-check"]} required={{ 'form-feedback': true }} />
 
 ## Examples
 
@@ -53,9 +38,10 @@ visit [Accessible Web Designs indeterminate checkbox](http://www.barrierefreies-
 
 The indeterminate state can only be set via JavaScript and is styled using the `:indeterminate` pseudo-class.
 
-```javascript
-document.querySelector('input[type="checkbox"]').indeterminate = true;
-```
+<Source
+  code={`document.querySelector('input[type="checkbox"]').indeterminate = true;`}
+  language="javascript"
+/>
 
 ### Inline
 
diff --git a/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
index e5c009f011..0e7fa6d090 100644
--- a/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
+++ b/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as CheckboxCardStories from './checkbox-card.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={CheckboxCardStories} />
 
@@ -13,8 +14,8 @@ import * as CheckboxCardStories from './checkbox-card.stories';
 <div className="alert alert-info">
   <h2 class="h5">Firefox fallback classes</h2>
   Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
-    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
-  </a>. As a fallback, the following states have to be mirrored on the top level element in the form
+  the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+</a>. As a fallback, the following states have to be mirrored on the top level element in the form
   of classes:
   <ul>
     <li>
@@ -47,17 +48,4 @@ Checkbox cards can be grouped together. Use a `fieldset`/`legend` combination to
   <Controls of={CheckboxCardStories.Group} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/choice-control-card.scss';
-```
+<StylesPackageImport components={["choice-control-card"]} />
diff --git a/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
index 6d9a0e93c3..ef12565fe6 100644
--- a/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
+++ b/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as RadiobuttonCardStories from './radiobutton-card.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={RadiobuttonCardStories} />
 
@@ -13,8 +14,8 @@ import * as RadiobuttonCardStories from './radiobutton-card.stories';
 <div className="alert alert-info">
   <h2 class="h5">Firefox fallback classes</h2>
   Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
-    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
-  </a>. As a fallback, the following states have to be mirrored on the top level element in the form
+  the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+</a>. As a fallback, the following states have to be mirrored on the top level element in the form
   of classes:
   <ul>
     <li>
@@ -47,17 +48,4 @@ Radiobutton cards can be grouped together. Use a `fieldset`/`legend` combination
   <Controls of={RadiobuttonCardStories.Group} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/choice-control-card.scss';
-```
+<StylesPackageImport components={["choice-control-card"]} />
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible-custom-trigger.sample.ts b/packages/documentation/src/stories/components/collapsible/collapsible-custom-trigger.sample.ts
new file mode 100644
index 0000000000..dfa6e16e3d
--- /dev/null
+++ b/packages/documentation/src/stories/components/collapsible/collapsible-custom-trigger.sample.ts
@@ -0,0 +1,2 @@
+const collapsible = document.querySelector('#collapsibleId') as HTMLPostCollapsibleElement;
+collapsible.toggle(/* open: boolean */).then((/* isOpen: boolean */) => {});
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
index ee036ee7cb..56f2ded42d 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
@@ -1,5 +1,6 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
 import * as CollapsibleStories from './collapsible.stories';
+import SampleCustomTrigger from './collapsible-custom-trigger.sample?raw';
 
 <Meta of={CollapsibleStories} />
 
@@ -44,10 +45,11 @@ The `<post-collapsible>` component exposes a `.toggle()` method that allows to t
 This method is asynchronous and returns a promise that resolves with the current open state.
 It optionally takes a boolean parameter that forces open when `true` or close when `false`.
 
-```typescript
-const collapsible = document.querySelector('#collapsibleId') as HTMLPostCollapsibleElement;
-collapsible.toggle(/* open: boolean */).then((/* isOpen: boolean */) => {});
-```
+<Source
+  code={SampleCustomTrigger}
+  language="typescript"
+/>
+
 
 A header is then not mandatory and can be replaced by an external control.
 
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.tsx b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
rename to packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
diff --git a/packages/documentation/src/stories/components/heading/heading.docs.mdx b/packages/documentation/src/stories/components/heading/heading.docs.mdx
index 0f901b96d2..bcb6b2cdb7 100644
--- a/packages/documentation/src/stories/components/heading/heading.docs.mdx
+++ b/packages/documentation/src/stories/components/heading/heading.docs.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as HeadingStories from './heading.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import LinkTo from '@storybook/addon-links/react';
 
 <Meta of={HeadingStories} />
 
@@ -12,24 +13,13 @@ import * as HeadingStories from './heading.stories';
 
 All HTML headings are available, from `h1` the highest section level to `h6` the lowest.<br/>
 If you need to match the font styling of a heading but cannot use the associated HTML element,
-check out <LinkTo kind="utilities-heading" story="docs">heading utilities</LinkTo>.
+check out
+<LinkTo kind="utilities-heading" story="docs">heading utilities</LinkTo>.
 
 <Canvas of={HeadingStories.Default} />
 <div className="hide-col-default">
   <Controls of={HeadingStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```css dark
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
+<StylesPackageImport components={["type"]} />
 
-```css dark
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/type.scss';
-```
diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx
index f16f22f279..1610f2ca25 100644
--- a/packages/documentation/src/stories/components/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/input/input.docs.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as InputStories from './input.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={InputStories} />
 
@@ -17,26 +18,7 @@ Custom input elements need only the class `.form-control` to trigger the custom
   <Controls of={InputStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/forms.scss';
-
-// required if you use floating-labels
-@use '@swisspost/design-system-styles/components/floating-label.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["forms"]} required={{ 'floating-label': true, 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
@@ -47,7 +29,7 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<input>` element must come first, so we can ensure the correct styles.
 
-<Canvas of={InputStories.FloatingLabel} />
+    <Canvas of={InputStories.FloatingLabel} />
 
 ### Sizing
 
diff --git a/packages/documentation/src/stories/components/radio/radio.docs.mdx b/packages/documentation/src/stories/components/radio/radio.docs.mdx
index 4bf20341dc..6a176f02ad 100644
--- a/packages/documentation/src/stories/components/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/radio/radio.docs.mdx
@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 import * as RadioStories from './radio.stories';
 
@@ -18,23 +19,7 @@ Our radios use custom icons to indicate checked states.
   <Controls of={RadioStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/form-check.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["form-check"]} required={{ 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/range/range.docs.mdx b/packages/documentation/src/stories/components/range/range.docs.mdx
index 29ed32c1dd..940082eb61 100644
--- a/packages/documentation/src/stories/components/range/range.docs.mdx
+++ b/packages/documentation/src/stories/components/range/range.docs.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
-
 import * as RangeStories from './range.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={RangeStories} />
 
@@ -18,23 +18,7 @@ Create custom `range` controls with `.form-range`. The track (the background) an
   <Controls of={RangeStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/form-range.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["form-range"]} required={{ 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/select/select.docs.mdx b/packages/documentation/src/stories/components/select/select.docs.mdx
index ee4602e1e2..fb9ccab577 100644
--- a/packages/documentation/src/stories/components/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/select/select.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as SelectStories from './select.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={SelectStories} />
 
@@ -17,27 +18,8 @@ Custom `<select>` menus need only the class `.form-select` to trigger the custom
   <Controls of={SelectStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/forms.scss';
-@use '@swisspost/design-system-styles/components/form-select.scss';
-
-// required if you use floating-labels
-@use '@swisspost/design-system-styles/components/floating-label.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["forms", "form-select"]}
+                     required={{ 'floating-label': true, 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/switch/switch.docs.mdx b/packages/documentation/src/stories/components/switch/switch.docs.mdx
index da53f79512..a0cd2c7141 100644
--- a/packages/documentation/src/stories/components/switch/switch.docs.mdx
+++ b/packages/documentation/src/stories/components/switch/switch.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as switchStories from './switch.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={switchStories} />
 
@@ -17,23 +18,7 @@ Consider using `role="switch"` to more accurately convey the nature of the contr
   <Controls of={switchStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/form-check.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["form-check"]} required={{ 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/table/table.docs.mdx b/packages/documentation/src/stories/components/table/table.docs.mdx
index 19b54489d8..51a37fb704 100644
--- a/packages/documentation/src/stories/components/table/table.docs.mdx
+++ b/packages/documentation/src/stories/components/table/table.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as TableStories from './table.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={TableStories} />
 
@@ -15,20 +16,7 @@ import * as TableStories from './table.stories';
   <Controls of={TableStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/table.scss';
-```
+<StylesPackageImport components={["table"]} />
 
 ## Usage examples
 
diff --git a/packages/documentation/src/stories/components/tabs/tabs-custom-trigger.sample.ts b/packages/documentation/src/stories/components/tabs/tabs-custom-trigger.sample.ts
new file mode 100644
index 0000000000..f704c4391a
--- /dev/null
+++ b/packages/documentation/src/stories/components/tabs/tabs-custom-trigger.sample.ts
@@ -0,0 +1,2 @@
+const tabs = document.querySelector('post-tabs') as HTMLPostTabsElement;
+tabs.show('myPanel');
diff --git a/packages/documentation/src/stories/components/tabs/tabs-tab-change.sample.ts b/packages/documentation/src/stories/components/tabs/tabs-tab-change.sample.ts
new file mode 100644
index 0000000000..548f9a08fc
--- /dev/null
+++ b/packages/documentation/src/stories/components/tabs/tabs-tab-change.sample.ts
@@ -0,0 +1,4 @@
+const tabs = document.querySelector('post-tabs') as HTMLPostTabsElement;
+tabs.addEventListener('tabChange', (panelName: string) => {
+  alert(`The panel named ${panelName} is now displayed.`);
+});
diff --git a/packages/documentation/src/stories/components/tabs/tabs.docs.mdx b/packages/documentation/src/stories/components/tabs/tabs.docs.mdx
index 45da50aac0..ee1b5fdacd 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.docs.mdx
+++ b/packages/documentation/src/stories/components/tabs/tabs.docs.mdx
@@ -1,5 +1,7 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
 import * as TabStories from './tabs.stories';
+import SampleTabChange from './tabs-tab-change.sample?raw';
+import SampleCustomTrigger from './tabs-custom-trigger.sample?raw';
 
 <Meta of={TabStories} />
 
@@ -26,18 +28,16 @@ use the `active-panel` property and assign it the name of the desired panel.
 
 Use the `tabChange` event to run a function anytime a new tab gets activate.
 
-```typescript
-const tabs = document.querySelector('post-tabs') as HTMLPostTabsElement;
-tabs.addEventListener('tabChange', (panelName: string) => {
-  alert(`The panel named ${panelName} is now displayed.`);
-});
-```
+<Source
+  code={SampleTabChange}
+  language="typescript"
+/>
 
 ### Custom Trigger
 
 To trigger a tab change, use the `show()` method specifying the name of the panel that you want to show.
 
-```typescript
-const tabs = document.querySelector('post-tabs') as HTMLPostTabsElement;
-tabs.show('myPanel');
-```
+<Source
+  code={SampleCustomTrigger}
+  language="typescript"
+/>
diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
index 93786e4869..b006e0d230 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
+++ b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as TextareaStories from './textarea.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={TextareaStories} />
 
@@ -17,26 +18,7 @@ Custom textarea elements need only the class `.form-control` to trigger the cust
   <Controls of={TextareaStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/forms.scss';
-
-// required if you use floating-labels
-@use '@swisspost/design-system-styles/components/floating-label.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
+<StylesPackageImport components={["forms"]} required={{ 'floating-label': true, 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/toast/toast.docs.mdx b/packages/documentation/src/stories/components/toast/toast.docs.mdx
index b30f665c22..1bbf3f9298 100644
--- a/packages/documentation/src/stories/components/toast/toast.docs.mdx
+++ b/packages/documentation/src/stories/components/toast/toast.docs.mdx
@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as ToastStories from './toast.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={ToastStories} />
 
@@ -19,20 +20,7 @@ They are intended to be small interruptions to your visitors or users, and there
   <Controls of={ToastStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/toast.scss';
-```
+<StylesPackageImport components={["toast"]} />
 
 ## Concrete Examples of Application
 
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
index f9bd1d79cb..3310671cdc 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as TopicTeaserStories from './topic-teaser.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={TopicTeaserStories} />
 
@@ -12,22 +13,9 @@ import * as TopicTeaserStories from './topic-teaser.stories';
 
 If you use multiple topic teasers on one page, each topic teaser must have a different background.
 
-<Canvas of={TopicTeaserStories.Default}/>
+<Canvas of={TopicTeaserStories.Default} />
 <div className="hide-col-default">
   <Controls of={TopicTeaserStories.Default} />
 </div>
 
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/topic-teaser.scss';
-```
+<StylesPackageImport components={["topic-teaser"]} />
diff --git a/packages/documentation/src/stories/foundation/color/color-use-css.sample.css b/packages/documentation/src/stories/foundation/color/color-use-css.sample.css
new file mode 100644
index 0000000000..1463719db9
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/color/color-use-css.sample.css
@@ -0,0 +1,3 @@
+.my-element {
+  property: var(--post-dark);
+}
diff --git a/packages/documentation/src/stories/foundation/color/color-use-scss.sample.scss b/packages/documentation/src/stories/foundation/color/color-use-scss.sample.scss
new file mode 100644
index 0000000000..522decdd59
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/color/color-use-scss.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  property: post.$dark;
+}
diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
index ba779620d9..519c1faf13 100644
--- a/packages/documentation/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -1,9 +1,11 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import { forEach } from '../../../utils/react';
 import * as ColorStories from './color.stories';
 import { ColorSwatch, SCSS_VARIABLES } from './color.blocks';
 import './color.styles.scss';
+import SampleCss from './color-use-css.sample.css?raw';
+import SampleScss from './color-use-scss.sample.scss?raw';
 
 <Meta of={ColorStories} />
 
@@ -13,16 +15,18 @@ In the following, you can see the Swiss Post specific colors.<br/>
 They theme our elements and components.
 
 <div className="alert alert-info alert-md mt-regular">
-  For accessibility reasons, you should always make sure that your individually created color combinations are sufficiently contrasting. There may be a better solution than coloring elements individually.
+  For accessibility reasons, you should always make sure that your individually created color combinations are
+  sufficiently contrasting. There may be a better solution than coloring elements individually.
 
-For example, use the <LinkTo kind="utilities-background" story="docs">background utilities</LinkTo> to get elements with a specific background color and the best possible contrast color for its content.
+  For example, use the <LinkTo kind="utilities-background" story="docs">background utilities</LinkTo> to get elements
+  with a specific background color and the best possible contrast color for its content.
 
 </div>
 
 ## Brand colors
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.brand, function (data) {
+  {forEach(SCSS_VARIABLES.brand, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} />;
   })}
 </section>
@@ -30,7 +34,7 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 ## Shades of gray
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.gray, function (data) {
+  {forEach(SCSS_VARIABLES.gray, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} />;
   })}
 </section>
@@ -38,7 +42,7 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 ## Page Backgrounds
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.pagebackgrounds, function (data) {
+  {forEach(SCSS_VARIABLES.pagebackgrounds, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} noCSS />;
   })}
 </section>
@@ -46,7 +50,7 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 ## Signal colors
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.contextual, function (data) {
+  {forEach(SCSS_VARIABLES.contextual, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} />;
   })}
 </section>
@@ -54,7 +58,7 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 ## Dark accent colors
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.accent.dark, function (data) {
+  {forEach(SCSS_VARIABLES.accent.dark, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} />;
   })}
 </section>
@@ -62,7 +66,7 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 ## Bright accent colors
 
 <section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.accent.bright, function (data) {
+  {forEach(SCSS_VARIABLES.accent.bright, function(data) {
     return <ColorSwatch key={data.key} name={data.key} color={data.value} />;
   })}
 </section>
@@ -73,20 +77,17 @@ For example, use the <LinkTo kind="utilities-background" story="docs">background
 
 CSS variables are globally available on your page.
 
-```css dark
-.my-element {
-  property: var(--post-dark);
-}
-```
+<Source
+  code={SampleCss}
+  language="css"
+/>
 
 ## Sass
 
 Import the color variables from the `core` file with `@use`. This way, the color variables are scoped and don't mix with your own variables.
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
+<Source
+  code={SampleScss}
+  language="scss"
+/>
 
-.my-element {
-  property: post.$dark;
-}
-```
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation-use.sample.scss b/packages/documentation/src/stories/foundation/elevation/elevation-use.sample.scss
new file mode 100644
index 0000000000..508af9a6e1
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/elevation/elevation-use.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.elevated-element {
+  box-shadow: post.$elevation-5;
+}
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx b/packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx
index 6ab3c3572d..fb8f657881 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx
@@ -1,8 +1,9 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import { forEach } from '../../../utils/react';
 import { ElevationTile, SCSS_VARIABLES } from './elevation.blocks';
 import * as ElevationStories from './elevation.stories';
 import './elevation.styles.scss';
+import SampleUse from './elevation-use.sample.scss?raw';
 
 <Meta of={ElevationStories} />
 
@@ -16,7 +17,7 @@ import './elevation.styles.scss';
 The higher the elevation, the larger and softer the shadow, expressing a greater distance between an element and the one behind it.
 
 <div className="elevation-container">
-  {forEach(SCSS_VARIABLES.elevation, function (data) {
+  {forEach(SCSS_VARIABLES.elevation, function(data) {
     return <ElevationTile key={data.key} level={data.key} />;
   })}
 </div>
@@ -33,10 +34,7 @@ The easiest way to add an elevation to an element is to apply an elevation class
 
 Import the elevation variables from the Design System Styles package from the `core` sass file with `@use`. This way, the elevation variables are scoped and don't mix with your own variables.
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.elevated-element {
-  box-shadow: post.$elevation-5;
-}
-```
+<Source
+  code={SampleUse}
+  language="scss"
+/>
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss
new file mode 100644
index 0000000000..98df3dfd65
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+@each $key, $value in post.$grid-breakpoints {
+  ...
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss
new file mode 100644
index 0000000000..19b499f360
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss
@@ -0,0 +1,5 @@
+@include post.media-breakpoint-between(sm, lg) {
+  .custom-class {
+    display: block;
+  }
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss
new file mode 100644
index 0000000000..febe98b129
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss
@@ -0,0 +1,6 @@
+// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
+@include post.media-breakpoint-down(lg) {
+  .custom-class {
+    display: none;
+  }
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss
new file mode 100644
index 0000000000..1f7ab6b26c
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss
@@ -0,0 +1,10 @@
+// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
+.custom-class {
+  display: none;
+}
+
+@include post.media-breakpoint-up(lg) {
+  .custom-class {
+    display: block;
+  }
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss
new file mode 100644
index 0000000000..149edc020c
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss
@@ -0,0 +1,5 @@
+@include post.media-breakpoint-only(xs) {
+  .custom-class {
+    display: block;
+  }
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
index fbfe4c6a16..9474017020 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -4,7 +4,7 @@ import scss from './breakpoints.module.scss';
 
 export const SCSS_VARIABLES = parse(scss);
 
-export const BreakpointTable = (props: { name: string; value: string }) => (
+export const BreakpointTable = () => (
   <table className="table table-sm table-striped table-bordered">
     <thead>
       <tr>
@@ -14,15 +14,18 @@ export const BreakpointTable = (props: { name: string; value: string }) => (
       </tr>
     </thead>
     <tbody>
-      {forEach(SCSS_VARIABLES.breakpoint, (data: { key: number; value: any }) => {
-        return (
-          <tr>
-            <td>{data.value.name}</td>
-            <td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
-            <td>{data.value.dimensions}</td>
-          </tr>
-        );
-      })}
+      {forEach(
+        SCSS_VARIABLES.breakpoint,
+        (data: { key: number; value: { name: string; infix: any; dimensions: string } }) => {
+          return (
+            <tr>
+              <td>{data.value.name}</td>
+              <td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
+              <td>{data.value.dimensions}</td>
+            </tr>
+          );
+        },
+      )}
     </tbody>
   </table>
 );
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
index 305a31f393..01c0ff390f 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
@@ -1,31 +1,35 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import { BreakpointTable, SCSS_VARIABLES } from './breakpoints.blocks';
 import * as BreakpointStories from './breakpoints.stories';
+import SampleAvailable from './breakpoints-available.sample.scss?raw';
+import SampleMinWidth from './breakpoints-min-width.sample.scss?raw';
+import SampleMaxWidth from './breakpoints-max-width.sample.scss?raw';
+import SampleSingle from './breakpoints-single.sample.scss?raw';
+import SampleBetween from './breakpoints-between.sample.scss?raw';
 
 <Meta of={BreakpointStories} />
 
 # Breakpoints
 
-<div class="lead">
+<div className="lead">
   Breakpoints are widths that determine how the responsive layout behaves across device or viewport
   sizes.
 </div>
 
 ## Available breakpoints
 
-The Swiss Post Design System includes {Object.keys(SCSS_VARIABLES.breakpoint).length} breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
+The Swiss Post Design System includes
+<span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>
+breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
 
 <BreakpointTable />
 
 You’ll find these breakpoints in a Sass map in our styles core.
 
-```scss
-@use '@swisspost/design-system-styles/core' as post;
-
-@each $key, $value in post.$grid-breakpoints {
-  ...
-}
-```
+<Source
+  code={SampleAvailable}
+  language="scss"
+/>
 
 ## Mixins
 
@@ -35,52 +39,34 @@ There are several mixins available to use in your own Sass to help with building
 
 We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
 
-```scss
-// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
-.custom-class {
-  display: none;
-}
-
-@include post.media-breakpoint-up(lg) {
-  .custom-class {
-    display: block;
-  }
-}
-```
+<Source
+  code={SampleMinWidth}
+  language="scss"
+/>
 
 ### Max-width
 
 We occasionally use media queries that go in the other direction.
 
-```scss
-// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
-@include post.media-breakpoint-down(lg) {
-  .custom-class {
-    display: none;
-  }
-}
-```
+<Source
+  code={SampleMaxWidth}
+  language="scss"
+/>
 
 ### Single breakpoint
 
 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
-```scss
-@include post.media-breakpoint-only(xs) {
-  .custom-class {
-    display: block;
-  }
-}
-```
+<Source
+  code={SampleSingle}
+  language="scss"
+/>
 
 ### Between breakpoints
 
 Similarly, media queries may span multiple breakpoint widths.
 
-```scss
-@include post.media-breakpoint-between(sm, lg) {
-  .custom-class {
-    display: block;
-  }
-}
-```
+<Source
+  code={SampleBetween}
+  language="scss"
+/>
diff --git a/packages/documentation/src/stories/foundation/typography/typography-standalone.sample.css b/packages/documentation/src/stories/foundation/typography/typography-standalone.sample.css
new file mode 100644
index 0000000000..ed52ac3047
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/typography/typography-standalone.sample.css
@@ -0,0 +1,24 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Frutiger Neue For Post';
+  font-weight: 700;
+  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2')
+      format('woff2'),
+    url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff') format('woff');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Frutiger Neue For Post';
+  font-weight: 400;
+  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
+    url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff') format('woff');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Frutiger Neue For Post';
+  font-weight: 300;
+  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
+    url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff') format('woff');
+}
diff --git a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
index 7a1b0ea272..e166efc3d6 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
+++ b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
@@ -1,18 +1,19 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as TypographyStories from './typography.stories';
 import {
-  FontFaceWrapper,
+  FontCurves,
   FontFace,
+  FontFaceWrapper,
   FontSizesAndLineheights,
-  FontCurves,
   Headings,
-  Paragraphs,
-  Links,
   Inlines,
+  Links,
   Lists,
+  Paragraphs,
 } from './typography.blocks';
 import './typography.styles.scss';
+import SampleStandalone from './typography-standalone.sample.css?raw';
 
 <Meta of={TypographyStories} />
 
@@ -20,7 +21,8 @@ import './typography.styles.scss';
 
 This page describes the typography basics of the design system.<br/>
 If you want to know how to adjust font-families, font-sizes, etc. in your code,
-please visit our <LinkTo kind="utilities-text" story="docs">text utilities docs</LinkTo>.
+please visit our
+<LinkTo kind="utilities-text" story="docs">text utilities docs</LinkTo>.
 
 ## Font Families
 
@@ -39,32 +41,10 @@ One is the main font family "Frutiger Neue" and the other is a monospace font fa
 
 If you cannot use the design system but need the fonts, you can integrate them into your project as follows:
 
-{/* prettier-ignore */}
-```css dark
-@font-face {
-  font-display: swap;
-  font-family: 'Frutiger Neue For Post';
-  font-weight: 700;
-  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
-       url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff') format('woff');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Frutiger Neue For Post';
-  font-weight: 400;
-  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
-       url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff') format('woff');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Frutiger Neue For Post';
-  font-weight: 300;
-  src: url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2') format('woff2'),
-       url('//fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff') format('woff');
-}
-```
+<Source
+  code={SampleStandalone}
+  language="css"
+/>
 
 ## Font Sizes & Line Heights
 
diff --git a/packages/documentation/src/stories/getting-started/components/components-use-all.sample.js b/packages/documentation/src/stories/getting-started/components/components-use-all.sample.js
new file mode 100644
index 0000000000..b2f7ad565e
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/components/components-use-all.sample.js
@@ -0,0 +1,3 @@
+import { defineCustomElements } from '@swisspost/design-system-components/loader';
+
+defineCustomElements();
diff --git a/packages/documentation/src/stories/getting-started/components/components-use-specific.sample.js b/packages/documentation/src/stories/getting-started/components/components-use-specific.sample.js
new file mode 100644
index 0000000000..af0695700d
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/components/components-use-specific.sample.js
@@ -0,0 +1,3 @@
+import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';
+
+definePostIcon();
diff --git a/packages/documentation/src/stories/getting-started/components/components.docs.mdx b/packages/documentation/src/stories/getting-started/components/components.docs.mdx
index 70ff0f8534..0633cb8805 100644
--- a/packages/documentation/src/stories/getting-started/components/components.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/components/components.docs.mdx
@@ -1,5 +1,7 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import * as GettingStartedStories from './components.stories';
+import SampleUseAll from './components-use-all.sample?raw';
+import SampleUseSpecific from './components-use-specific.sample?raw';
 
 <Meta of={GettingStartedStories} />
 
@@ -18,30 +20,30 @@ A set of standard web components for easy integration with every framework or no
 
 {/* https://stenciljs.com/docs/custom-elements#consuming-custom-elements */}
 
-```bash dark
-npm install @swisspost/design-system-components
-```
+<Source
+  code={`npm install @swisspost/design-system-components`}
+  language="bash"
+/>
 
 ## Usage
 
 Import all the available components into your project (for example into your `/src/main.ts` or `/src/index.js` file) and make them work:
 
-```js dark
-import { defineCustomElements } from '@swisspost/design-system-components/loader';
-
-defineCustomElements();
-```
+<Source
+  code={SampleUseAll}
+  language="javascript"
+/>
 
 Import specific components:
 
-```ts dark
-import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';
-
-definePostIcon();
-```
+<Source
+  code={SampleUseSpecific}
+  language="javascript"
+/>
 
 Use the imported components in your html:
 
-```html dark
-<post-icon name="1000"></post-icon>
-```
+<Source
+  code={`<post-icon name="1000"></post-icon>`}
+  language="html"
+/>
diff --git a/packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss b/packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss
new file mode 100644
index 0000000000..ae827a9197
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core.scss' as post;
+
+.my-component {
+  background-color: post.$yellow; // #FFCC00
+}
diff --git a/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx b/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
index 1d1e0c28f5..d89ef5c62c 100644
--- a/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import * as GettingStartedStories from './styles.stories';
+import SampleVariable from './styles-variable.sample.scss?raw';
 
 <Meta of={GettingStartedStories} />
 
@@ -16,17 +17,19 @@ The styling package, including theming for [Bootstrap](https://getbootstrap.com/
 
 ## Installation
 
-```bash dark
-  npm install @swisspost/design-system-styles
-```
+<Source
+  code={`npm install @swisspost/design-system-styles`}
+  language="bash"
+/>
 
 ## Usage
 
 Import one of our stylesheets into your project (for example into your `/src/styles.scss` file).
 
-```scss dark
-@use '@swisspost/design-system-styles/<bundle-name>.<extension>';
-```
+<Source
+  code={`@use '@swisspost/design-system-styles/<bundle-name>.<extension>';`}
+  language="scss"
+/>
 
 ### Available bundles
 
@@ -61,12 +64,11 @@ Import one of our stylesheets into your project (for example into your `/src/sty
 
 Use the SCSS core for your custom styles and make sure you're always using the most up to date definitions:
 
-<p className="alert alert-info alert-md">NOTE: The core file itself, does not produce any CSS output. It only contains variables, functions and mixins.</p>
+<p className="alert alert-info alert-md">NOTE: The core file itself, does not produce any CSS output. It only contains
+  variables, functions and mixins.</p>
 
-```scss dark
-@use '@swisspost/design-system-styles/core.scss' as post;
+<Source
+  code={SampleVariable}
+  language="scss"
+/>
 
-.my-component {
-  background-color: post.$yellow; // #FFCC00
-}
-```
diff --git a/packages/documentation/src/stories/icons/getting-started-angular-config.sample.json b/packages/documentation/src/stories/icons/getting-started-angular-config.sample.json
new file mode 100644
index 0000000000..ccd2a00074
--- /dev/null
+++ b/packages/documentation/src/stories/icons/getting-started-angular-config.sample.json
@@ -0,0 +1,19 @@
+{
+  "projects": {
+    "name-of-your-angular-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*.svg",
+                "input": "./node_modules/@swisspost/design-system-icons/public/post-icons",
+                "output": "assets/post-icons"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/documentation/src/stories/icons/getting-started-icon-meta.sample.html b/packages/documentation/src/stories/icons/getting-started-icon-meta.sample.html
new file mode 100644
index 0000000000..2ed13315c5
--- /dev/null
+++ b/packages/documentation/src/stories/icons/getting-started-icon-meta.sample.html
@@ -0,0 +1,5 @@
+<html>
+<head>
+  <meta name="design-system-settings" data-post-icon-base="/assets/post-icons" />
+</head>
+</html>
diff --git a/packages/documentation/src/stories/icons/getting-started-node-16.7.0.sample.json b/packages/documentation/src/stories/icons/getting-started-node-16.7.0.sample.json
new file mode 100644
index 0000000000..be275aca38
--- /dev/null
+++ b/packages/documentation/src/stories/icons/getting-started-node-16.7.0.sample.json
@@ -0,0 +1,6 @@
+// package.json
+{
+  "scripts": {
+    "postinstall": "node -e \"const fs = require('fs'); fs.cpSync('node_modules/@swisspost/design-system-icons/public/post-icons', 'assets/post-icons', { recursive: true }, (err) => { if (err) throw err; });\""
+  }
+}
diff --git a/packages/documentation/src/stories/icons/getting-started-node-old.sample.js b/packages/documentation/src/stories/icons/getting-started-node-old.sample.js
new file mode 100644
index 0000000000..9a5ad68d2d
--- /dev/null
+++ b/packages/documentation/src/stories/icons/getting-started-node-old.sample.js
@@ -0,0 +1,13 @@
+// postinstall-icons.js
+const fse = require('fs-extra');
+
+const srcDir = 'node_modules/@swisspost/design-system-icons/public/post-icons';
+const destDir = 'assets/post-icons';
+
+// To copy a folder or file, select overwrite accordingly
+try {
+  fse.copySync(srcDir, destDir, { overwrite: true });
+  console.log('Icons successfully copied!');
+} catch (err) {
+  console.error(err);
+}
diff --git a/packages/documentation/src/stories/icons/getting-started-node-old.sample.json b/packages/documentation/src/stories/icons/getting-started-node-old.sample.json
new file mode 100644
index 0000000000..bc834d40c5
--- /dev/null
+++ b/packages/documentation/src/stories/icons/getting-started-node-old.sample.json
@@ -0,0 +1,6 @@
+// package.json
+{
+  "scripts": {
+    "postinstall": "node postinstall-icons.js"
+  }
+}
diff --git a/packages/documentation/src/stories/icons/getting-started.docs.mdx b/packages/documentation/src/stories/icons/getting-started.docs.mdx
index c9c1338311..98280b8b4e 100644
--- a/packages/documentation/src/stories/icons/getting-started.docs.mdx
+++ b/packages/documentation/src/stories/icons/getting-started.docs.mdx
@@ -1,6 +1,11 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as GettingStartedStories from './getting-started.stories';
+import SampleAngularConfig from './getting-started-angular-config.sample.json?raw';
+import SampleNode16 from './getting-started-node-16.7.0.sample.json?raw';
+import SampleNodeOlder from './getting-started-node-old.sample.json?raw';
+import SampleNodeOlderJs from './getting-started-node-old.sample.js?raw';
+import SampleIconMeta from './getting-started-icon-meta.sample.html?raw';
 
 <Meta of={GettingStartedStories} />
 
@@ -18,9 +23,10 @@ The comprehensive collection of Swiss Post icons.
 
 ## Installation
 
-```bash dark
-npm install @swisspost/design-system-icons
-```
+<Source
+  code={`npm install @swisspost/design-system-icons`}
+  language="bash"
+/>
 
 <div className="alert alert-info alert-md">
   If you want to use our <LinkTo kind="icons-components-icon" story="docs">icon component</LinkTo> to
@@ -43,27 +49,10 @@ Read on to find out what the possible solutions look like...
 It is very easy to serve the icons from the `node_modules` folder directly into your angular application.
 Just open your `angular.json` file and add the following to the `build.options.assets`:
 
-```json dark
-{
-  "projects": {
-    "name-of-your-angular-app": {
-      "architect": {
-        "build": {
-          "options": {
-            "assets": [
-              {
-                "glob": "**/*.svg",
-                "input": "./node_modules/@swisspost/design-system-icons/public/post-icons",
-                "output": "assets/post-icons"
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
-}
-```
+<Source
+  code={SampleAngularConfig}
+  language="json"
+/>
 
 ### Copy & paste the icons with a postinstall script
 
@@ -72,41 +61,24 @@ If you want to know more about pre & post scripts and how they are handled, plea
 
 #### NodeJS version 16.7.0 or newer
 
-```json dark
-// package.json
-{
-  "scripts": {
-    "postinstall": "node -e \"const fs = require('fs'); fs.cpSync('node_modules/@swisspost/design-system-icons/public/post-icons', 'assets/post-icons', { recursive: true }, (err) => { if (err) throw err; });\""
-  }
-}
-```
+package.json
+<Source
+  code={SampleNode16}
+  language="json"
+/>
+
 
 #### Older NodeJS versions
 
-```json dark
-// package.json
-{
-  "scripts": {
-    "postinstall": "node postinstall-icons.js"
-  }
-}
-```
-
-```js dark
-// postinstall-icons.js
-const fse = require('fs-extra');
-
-const srcDir = 'node_modules/@swisspost/design-system-icons/public/post-icons';
-const destDir = 'assets/post-icons';
-
-// To copy a folder or file, select overwrite accordingly
-try {
-  fse.copySync(srcDir, destDir, { overwrite: true });
-  console.log('Icons successfully copied!');
-} catch (err) {
-  console.error(err);
-}
-```
+<Source
+  code={SampleNodeOlder}
+  language="json"
+/>
+
+<Source
+  code={SampleNodeOlderJs}
+  language="javascript"
+/>
 
 ### Configure the icons base-path
 
@@ -118,19 +90,17 @@ You can do this with two different solutions:
 
 #### Meta-tag solution (recommended)
 
-```html dark
-<html>
-  <head>
-    <meta name="design-system-settings" data-post-icon-base="/assets/post-icons" />
-  </head>
-</html>
-```
+<Source
+  code={SampleIconMeta}
+  language="html"
+/>
 
 #### Base-attribute solution
 
-```html dark
-<post-icon name="1000" base="/base-path/to/your/own/icon-folder"></post-icon>
-```
+<Source
+  code={`<post-icon name="1000" base="/base-path/to/your/own/icon-folder"></post-icon>`}
+  language="html"
+/>
 
 ## CDN approach
 
diff --git a/packages/documentation/src/stories/internet-header/getting-started.docs.mdx b/packages/documentation/src/stories/internet-header/getting-started.docs.mdx
index 5db26a9492..17aaa19cb3 100644
--- a/packages/documentation/src/stories/internet-header/getting-started.docs.mdx
+++ b/packages/documentation/src/stories/internet-header/getting-started.docs.mdx
@@ -1,5 +1,11 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import { BADGE } from '../../../.storybook/constants';
+import SampleFrameworks from './internet-header-frameworks.sample.html?raw';
+import SampleLazyLoaded from './internet-header-lazy-loaded.sample.js?raw';
+import SampleBareComponent from './internet-header-bare-component.sample.js?raw';
+import SampleCDNLazyLoaded from './internet-header-cdn-lazy-loaded.sample.html?raw';
+import SampleCDNBareComponent from './internet-header-cdn-bare-component.sample.html?raw';
+import { SourceDarkMode } from '../../../.storybook/preview';
 
 <Meta
   title="Internet Header/Getting Started"
@@ -12,11 +18,11 @@ import { BADGE } from '../../../.storybook/constants';
 
 The header for client-facing applications.
 
-<ul>
-  <li><a href="#installation" target="_self">Installation</a></li>
-  <li><a href="#configuration" target="_self">Configuration</a></li>
-  <li><a href="#help" target="_self">Help</a></li>
-</ul>
+    <ul>
+    <li><a href="#installation" target="_self">Installation</a></li>
+    <li><a href="#configuration" target="_self">Configuration</a></li>
+    <li><a href="#help" target="_self">Help</a></li>
+    </ul>
 
 ## Installation
 
@@ -24,8 +30,8 @@ The header for client-facing applications.
 
 Internet-header package provide two versions:
 
-* Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
-* Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
+  * Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
+  * Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
 
 ### Angular, Vue.js, React (or any other bundler setup)
 
@@ -35,33 +41,33 @@ bundle and deliver the header with your own code.
 
 When working with Angular or any other framework, the easiest installation method is via npm.
 
-```shell
-npm install @swisspost/internet-header
-```
+<Source
+  code={`npm install @swisspost/internet-header`}
+  dark={SourceDarkMode}
+  language="bash"
+/>
 
-```html
-<!-- index.html -->
-<body>
-  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
-  ...
-</body>
-```
+<Source
+  code={SampleFrameworks}
+  dark={SourceDarkMode}
+  language="html"
+/>
 
 #### Lazy-loaded
 
-```javascript
-// main.ts / index.js / ...
-import { defineCustomElements } from '@swisspost/internet-header/loader';
-
-defineCustomElements();
-```
+<Source
+  code={SampleLazyLoaded}
+  dark={SourceDarkMode}
+  language="javascript"
+/>
 
 #### Bare component
 
-```javascript
-// main.ts / index.js / ...
-import '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.esm';
-```
+<Source
+  code={SampleBareComponent}
+  dark={SourceDarkMode}
+  language="javascript"
+/>
 
 ### Include from a CDN
 
@@ -75,33 +81,19 @@ Available CDNs:
 
 #### Lazy-loaded
 
-```html
-<!DOCTYPE html>
-<html>
-  <body>
-    <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
-  </body>
-  <script type="module">
-    import { defineCustomElements } from '{cdnUrl}@{version}/loader/index.es2017.js';
-    defineCustomElements();
-  </script>
-</html>
-```
+<Source
+  code={SampleCDNLazyLoaded}
+  dark={SourceDarkMode}
+  language="html"
+/>
+
 #### Bare component
 
-```html
-<!-- index.html -->
-<head>
-  <script
-    async
-    type="module"
-    src="{cdnUrl}@{version}/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
-  ></script>
-</head>
-<body>
-  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
-</body>
-```
+<Source
+  code={SampleCDNBareComponent}
+  dark={SourceDarkMode}
+  language="html"
+/>
 
 ## Configuration
 
diff --git a/packages/documentation/src/stories/internet-header/internet-header-bare-component.sample.js b/packages/documentation/src/stories/internet-header/internet-header-bare-component.sample.js
new file mode 100644
index 0000000000..27d696ac90
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-bare-component.sample.js
@@ -0,0 +1,2 @@
+// main.ts / index.js / ...
+import '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.esm';
diff --git a/packages/documentation/src/stories/internet-header/internet-header-cdn-bare-component.sample.html b/packages/documentation/src/stories/internet-header/internet-header-cdn-bare-component.sample.html
new file mode 100644
index 0000000000..2ba6f06507
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-cdn-bare-component.sample.html
@@ -0,0 +1,11 @@
+<!-- index.html -->
+<head>
+  <script
+    async
+    type="module"
+    src="{cdnUrl}@{version}/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
+  ></script>
+</head>
+<body>
+<swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+</body>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html b/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html
new file mode 100644
index 0000000000..849711c515
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-cdn-lazy-loaded.sample.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+<swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+</body>
+<script type="module">
+  import { defineCustomElements } from '{cdnUrl}@{version}/loader/index.es2017.js';
+
+  defineCustomElements();
+</script>
+</html>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html b/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html
new file mode 100644
index 0000000000..969e18929d
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-fix-app-styles.sample.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+  />
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+  />
+
+  <!-- Custom CSS -->
+</head>
+
+<body>
+<main id="os_content" class="container">
+  <!-- Content from the current page of the online service -->
+</main>
+</body>
+</html>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html b/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html
new file mode 100644
index 0000000000..e5a9d4a17f
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-frameworks.sample.html
@@ -0,0 +1,5 @@
+<!-- index.html -->
+<body>
+<swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+...
+</body>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-install.sample.html b/packages/documentation/src/stories/internet-header/internet-header-install.sample.html
new file mode 100644
index 0000000000..129b079e83
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-install.sample.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+  />
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+  />
+
+  <!-- Eigene CSS Verknüpfungen -->
+</head>
+
+<body>
+<!-- The header needs to be directly in the body tag for stickiness functionality to work -->
+<swisspost-internet-header project="your-service-id"></swisspost-internet-header>
+
+<aside class="my-huge-r container">
+  <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
+</aside>
+
+<main id="os_content" class="container">
+  <!-- Content from the current page of the online service  -->
+</main>
+
+<swisspost-internet-footer></swisspost-internet-footer>
+</body>
+</html>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-lazy-loaded.sample.js b/packages/documentation/src/stories/internet-header/internet-header-lazy-loaded.sample.js
new file mode 100644
index 0000000000..80b5bf4cc3
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-lazy-loaded.sample.js
@@ -0,0 +1,4 @@
+// main.ts / index.js / ...
+import { defineCustomElements } from '@swisspost/internet-header/loader';
+
+defineCustomElements();
diff --git a/packages/documentation/src/stories/internet-header/internet-header-old.sample.html b/packages/documentation/src/stories/internet-header/internet-header-old.sample.html
new file mode 100644
index 0000000000..0a91a54511
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-old.sample.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+  />
+  <link
+    rel="stylesheet"
+    href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+  />
+
+  <!-- Custom CSS -->
+
+  <!-- static assets -->
+  <script
+    src="https://www.post.ch/api/staticasset?serviceId=webstamp&file=head.js&environment=prod"
+    type="text/javascript"
+  ></script>
+</head>
+
+<body>
+<div id="os_content">
+  <!-- Content from the current page of the online service -->
+</div>
+
+<!-- configuration -->
+<script id="os_config" type="application/json">
+  {
+    "os_config": {
+      "currentLang": "de",
+      "currentUrl": "https://service.post.ch/onlinedienst/deep-url"
+    }
+  }
+</script>
+
+<!-- loader -->
+<script
+  src="https://www.post.ch/api/headerjs?serviceid=webstamp&includejquery=true&environment=prod"
+  type="text/javascript"
+></script>
+</body>
+</html>
diff --git a/packages/documentation/src/stories/internet-header/internet-header-reference.sample.ts b/packages/documentation/src/stories/internet-header/internet-header-reference.sample.ts
new file mode 100644
index 0000000000..6c4f7c0a5b
--- /dev/null
+++ b/packages/documentation/src/stories/internet-header/internet-header-reference.sample.ts
@@ -0,0 +1,11 @@
+const header = document.querySelector<HTMLSwisspostInternetHeaderElement>(
+  'swisspost-internet-header',
+);
+
+// Toggle search
+header.search = false;
+
+// Set new custom config
+header.customConfig = {
+  /* ... */
+};
diff --git a/packages/documentation/src/stories/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/internet-header/migration-guide.docs.mdx
index 59819e4702..ff37b21428 100644
--- a/packages/documentation/src/stories/internet-header/migration-guide.docs.mdx
+++ b/packages/documentation/src/stories/internet-header/migration-guide.docs.mdx
@@ -1,9 +1,14 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import { BADGE } from '../../../.storybook/constants';
+import SampleReference from './internet-header-reference.sample.ts?raw';
+import SampleInstall from './internet-header-install.sample.html?raw';
+import SampleFixAppStyles from './internet-header-fix-app-styles.sample.html?raw';
+import SampleOld from './internet-header-old.sample.html?raw';
+import { SourceDarkMode } from '../../../.storybook/preview';
 
 <Meta
   title="Internet Header/Migration Guide"
-  parameters={{ badges: [ BADGE.STABLE ] }}
+  parameters={{ badges: [BADGE.STABLE] }}
 />
 
 # Migration from the old header
@@ -40,50 +45,11 @@ One to load static assets, one to configure it and one to load it.
 - You can remove the configuration and the loader scripts, but remember your `serviceid`.
 - Try to remove the `staticassets` script to check if you still need it
 
-```html
-<html>
-  <head>
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
-    />
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
-    />
-
-    <!-- Custom CSS -->
-
-    <!-- static assets -->
-    <script
-      src="https://www.post.ch/api/staticasset?serviceId=webstamp&file=head.js&environment=prod"
-      type="text/javascript"
-    ></script>
-  </head>
-
-  <body>
-    <div id="os_content">
-      <!-- Content from the current page of the online service -->
-    </div>
-
-    <!-- configuration -->
-    <script id="os_config" type="application/json">
-      {
-        "os_config": {
-          "currentLang": "de",
-          "currentUrl": "https://service.post.ch/onlinedienst/deep-url"
-        }
-      }
-    </script>
-
-    <!-- loader -->
-    <script
-      src="https://www.post.ch/api/headerjs?serviceid=webstamp&includejquery=true&environment=prod"
-      type="text/javascript"
-    ></script>
-  </body>
-</html>
-```
+<Source
+  code={SampleOld}
+  dark={true}
+  language="html"
+/>
 
 ## 2. Fix your app styles
 
@@ -92,28 +58,11 @@ The new header does not provide those wrappers.
 Instead, every page has control over the main markup structure.
 A possible replacement of the above code could be:
 
-```html
-<html>
-  <head>
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
-    />
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
-    />
-
-    <!-- Custom CSS -->
-  </head>
-
-  <body>
-    <main id="os_content" class="container">
-      <!-- Content from the current page of the online service -->
-    </main>
-  </body>
-</html>
-```
+<Source
+  code={SampleFixAppStyles}
+  dark={true}
+  language="html"
+/>
 
 - Likely you'll need the class `container` around your main content to align it properly in the center.
 - For bonus points on semantic markup, use the [`<main>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) around the main page content
@@ -137,37 +86,11 @@ Please refer to the [Internet Header installation instructions](/story/getting-s
 
 After installation, you're ready to add the new tags to your markup:
 
-```html
-<html>
-  <head>
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
-    />
-    <link
-      rel="stylesheet"
-      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
-    />
-
-    <!-- Eigene CSS Verknüpfungen -->
-  </head>
-
-  <body>
-    <!-- The header needs to be directly in the body tag for stickiness functionality to work -->
-    <swisspost-internet-header project="your-service-id"></swisspost-internet-header>
-
-    <aside class="my-huge-r container">
-      <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
-    </aside>
-
-    <main id="os_content" class="container">
-      <!-- Content from the current page of the online service  -->
-    </main>
-
-    <swisspost-internet-footer></swisspost-internet-footer>
-  </body>
-</html>
-```
+<Source
+  code={SampleInstall}
+  dark={SourceDarkMode}
+  language="html"
+/>
 
 Place the new elements as described (and needed) as shown above.
 The breadcrumbs need a `container` wrapper to align themselves with the content of your page,
@@ -178,18 +101,11 @@ If you don't have breadcrumbs, you can just delete the `<aside>` and the `<swiss
 
 If you need to change settings during runtime, you can get a reference to the header by querying:
 
-```ts
-const header = document.querySelector<HTMLSwisspostInternetHeaderElement>(
-  'swisspost-internet-header',
-);
-
-// Toggle search
-header.search = false;
+<Source
+  code={SampleReference}
+  dark={SourceDarkMode}
+  language="typescript"
+/>
 
-// Set new custom config
-header.customConfig = {
-  /* ... */
-};
-```
 
-At the [Internet Header configuration page](/story/header-usage--page) you can find a list of possible options.
+At the [Internet Header configuration page](/story/header - usage--page) you can find a list of possible options.
diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html
new file mode 100644
index 0000000000..63d9c0fc45
--- /dev/null
+++ b/packages/documentation/src/stories/intranet-header/intranet-header-navigation-bar.sample.html
@@ -0,0 +1,24 @@
+<section class="layout-container header-big">
+  <sp-intranet-header siteTitle="Site Title" languages="de,fr,it">
+    <li class="nav-item"><a class="nav-link">Link 1</a></li>
+    <li class="nav-item"><a class="nav-link">Link 2</a></li>
+    <li class="nav-item" ngbDropdown>
+      <span class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</span>
+      <div class="dropdown-menu" aria-labelledby="toggle" ngbDropdownMenu>
+        <a class="dropdown-item" ngbDropdownItem>Dropdown link 1</a>
+        <a class="dropdown-item" ngbDropdownItem>Dropdown link 2</a>
+        <a class="dropdown-item" ngbDropdownItem>Dropdown link 3</a>
+      </div>
+    </li>
+    <li class="nav-item"><a class="nav-link">Link 3</a></li>
+  </sp-intranet-header>
+  <main role="main" class="container header-margin pt-huge">
+    <h1>Content</h1>
+    <p>
+      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.
+    </p>
+  </main>
+</section>
diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html
new file mode 100644
index 0000000000..abd9af6444
--- /dev/null
+++ b/packages/documentation/src/stories/intranet-header/intranet-header-postweb.sample.html
@@ -0,0 +1,45 @@
+<section class="layout-container header-big with-searchbar">
+  <sp-intranet-header [showIntranetSearch]="true" siteTitle="PostWeb">
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Post Informatik</a></li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Service-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Die Post</a></li>
+  </sp-intranet-header>
+  <div class="site-content container-fluid header-margin">
+    <div class="row flex-grow-1">
+      <nav
+        [ngClass]="{'closed': !openedMenu}"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
+        id="sidebar"
+      >
+        <div class="sidebar-sticky header-margin bg-light">
+          <!-- left menu -->
+          <ul>
+            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
+              <em class="pi pi-menu"></em> Active Page
+            </li>
+            <li><a>Home</a></li>
+            <li class="separator"></li>
+            <li>Menu Text
+              <ul>
+                <li class="level2"><a>Link 1</a></li>
+                <li class="level2"><a>Link 2</a></li>
+                <li class="level2"><a>Link 3</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <main class="col-md-9 col-lg-10 p-regular" role="main">
+        <h1>Content</h1>
+        <p>
+          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.
+        </p>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html
new file mode 100644
index 0000000000..267408b624
--- /dev/null
+++ b/packages/documentation/src/stories/intranet-header/intranet-header-side-navigation.sample.html
@@ -0,0 +1,39 @@
+<section class="layout-container header-small">
+  <sp-intranet-header [hasNavbar]="false" siteTitle="Site Title"></sp-intranet-header>
+  <div class="site-content container-fluid header-margin">
+    <div class="row flex-grow-1">
+      <nav
+        [ngClass]="{'closed': !openedMenu}"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
+        id="sidebar"
+      >
+        <div class="sidebar-sticky header-margin bg-light">
+          <!-- left menu -->
+          <ul>
+            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
+              <em class="pi pi-menu"></em> Active Page
+            </li>
+            <li><a>Home</a></li>
+            <li class="separator"></li>
+            <li>Menu Text
+              <ul>
+                <li class="level2"><a>Link 1</a></li>
+                <li class="level2"><a>Link 2</a></li>
+                <li class="level2"><a>Link 3</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <main class="col-md-9 col-lg-10 p-regular" role="main">
+        <h1>Content</h1>
+        <p>
+          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.
+        </p>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/packages/documentation/src/stories/intranet-header/intranet-header-use.sample.js b/packages/documentation/src/stories/intranet-header/intranet-header-use.sample.js
new file mode 100644
index 0000000000..fe9e8e3823
--- /dev/null
+++ b/packages/documentation/src/stories/intranet-header/intranet-header-use.sample.js
@@ -0,0 +1,7 @@
+// Other imports ....
+import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
+
+@NgModule({
+  imports: [SwissPostIntranetHeaderModule],
+})
+export class AppModule {}
diff --git a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
index d327d97471..9767085131 100644
--- a/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
+++ b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
@@ -1,5 +1,9 @@
-import { ArgTypes, Meta } from '@storybook/blocks';
+import { ArgTypes, Meta, Source } from '@storybook/blocks';
 import * as IntranetHeaderStories from './intranet-header.stories';
+import SampleUse from './intranet-header-use.sample?raw';
+import SampleNavigationBar from './intranet-header-navigation-bar.sample.html?raw';
+import SampleSideNavigation from './intranet-header-side-navigation.sample.html?raw';
+import SamplePostweb from './intranet-header-postweb.sample.html?raw';
 
 <Meta of={IntranetHeaderStories} />
 
@@ -8,7 +12,8 @@ import * as IntranetHeaderStories from './intranet-header.stories';
 [![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)
 
 <div className="alert alert-info alert-md">
-  The intranet header is an <a href="//Angular.io" target="_blank">Angular</a> component, as such it only works within Angular projects.
+  The intranet header is an <a href="//Angular.io" target="_blank">Angular</a> component, as such it only works within
+  Angular projects.
 </div>
 
 The Header Angular component for internal usage.
@@ -21,23 +26,20 @@ The Header Angular component for internal usage.
 
 ## Installation
 
-```bash dark
-npm install @swisspost/design-system-intranet-header
-```
+<Source
+  code={`npm install @swisspost/design-system-intranet-header`}
+  language="bash"
+/>
 
 ## Usage
 
 1. In `app.module.ts`, import `SwissPostIntranetHeaderModule` and add it to the `imports` array property.
 
-```js dark
-// Other imports ....
-import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
+<Source
+  code={SampleUse}
+  language="typescript"
+/>
 
-@NgModule({
-  imports: [ SwissPostIntranetHeaderModule ],
-})
-export class AppModule {}
-```
 
 2. In `app.component.html`, create a `section` container and assign it the CSS classes that best suit your desired layout:
 
@@ -80,123 +82,21 @@ export class AppModule {}
 
 ### Header with a navigation bar
 
-```html dark
-<section class="layout-container header-big">
-  <sp-intranet-header siteTitle="Site Title" languages="de,fr,it">
-    <li class="nav-item"><a class="nav-link">Link 1</a></li>
-    <li class="nav-item"><a class="nav-link">Link 2</a></li>
-    <li class="nav-item" ngbDropdown>
-      <span class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</span>
-      <div class="dropdown-menu" aria-labelledby="toggle" ngbDropdownMenu>
-        <a class="dropdown-item" ngbDropdownItem>Dropdown link 1</a>
-        <a class="dropdown-item" ngbDropdownItem>Dropdown link 2</a>
-        <a class="dropdown-item" ngbDropdownItem>Dropdown link 3</a>
-      </div>
-    </li>
-    <li class="nav-item"><a class="nav-link">Link 3</a></li>
-  </sp-intranet-header>
-  <main role="main" class="container header-margin pt-huge">
-    <h1>Content</h1>
-    <p>
-      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.
-    </p>
-  </main>
-</section>
-```
+<Source
+  code={SampleNavigationBar}
+  language="html"
+/>
 
 ### Header with a side navigation
 
-```html dark
-<section class="layout-container header-small">
-  <sp-intranet-header [hasNavbar]="false" siteTitle="Site Title"></sp-intranet-header>
-  <div class="site-content container-fluid header-margin">
-    <div class="row flex-grow-1">
-      <nav
-        [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
-        id="sidebar"
-      >
-        <div class="sidebar-sticky header-margin bg-light">
-          <!-- left menu -->
-          <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em> Active Page
-            </li>
-            <li><a>Home</a></li>
-            <li class="separator"></li>
-            <li>Menu Text
-              <ul>
-                <li class="level2"><a>Link 1</a></li>
-                <li class="level2"><a>Link 2</a></li>
-                <li class="level2"><a>Link 3</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <main class="col-md-9 col-lg-10 p-regular" role="main">
-        <h1>Content</h1>
-        <p>
-          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.
-        </p>
-      </main>
-    </div>
-  </div>
-</section>
-```
+<Source
+  code={SampleSideNavigation}
+  language="html"
+/>
 
 ### "Postweb" intranet header
 
-```html dark
-<section class="layout-container header-big with-searchbar">
-  <sp-intranet-header [showIntranetSearch]="true" siteTitle="PostWeb">
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Home</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Post Informatik</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Service-Portal</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Die Post</a></li>
-  </sp-intranet-header>
-  <div class="site-content container-fluid header-margin">
-    <div class="row flex-grow-1">
-      <nav
-        [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
-        id="sidebar"
-      >
-        <div class="sidebar-sticky header-margin bg-light">
-          <!-- left menu -->
-          <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em> Active Page
-            </li>
-            <li><a>Home</a></li>
-            <li class="separator"></li>
-            <li>Menu Text
-              <ul>
-                <li class="level2"><a>Link 1</a></li>
-                <li class="level2"><a>Link 2</a></li>
-                <li class="level2"><a>Link 3</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </nav>
-      <main class="col-md-9 col-lg-10 p-regular" role="main">
-        <h1>Content</h1>
-        <p>
-          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.
-        </p>
-      </main>
-    </div>
-  </div>
-</section>
-```
+<Source
+  code={SamplePostweb}
+  language="html"
+/>
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx b/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
index f6a49b5ef8..135fe55d39 100644
--- a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
+++ b/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
@@ -1,8 +1,9 @@
 import { Markdown, Meta } from '@storybook/blocks';
 import changelog from '../../../../../styles/CHANGELOG.md?raw';
+import { CodeOrSourceMdx } from '../../utilities/markdown/CodeOrSourceMdx';
 
 <Meta
   title="Misc/Changelog"
 />
 
-<Markdown>{changelog}</Markdown>
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>
diff --git a/packages/documentation/src/stories/utilities/markdown/CodeOrSourceMdx.tsx b/packages/documentation/src/stories/utilities/markdown/CodeOrSourceMdx.tsx
new file mode 100644
index 0000000000..bb3d9b48e9
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/markdown/CodeOrSourceMdx.tsx
@@ -0,0 +1,26 @@
+// Source: https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/mdx.tsx#L34
+import { Source } from '@storybook/blocks';
+import { Code } from '@storybook/components';
+import { SourceDarkMode } from '../../../../.storybook/preview';
+
+// @ts-ignore
+export const CodeOrSourceMdx = ({ className, children, ...rest }) => {
+  // markdown-to-jsx does not add className to inline code
+  if (
+    typeof className !== 'string' &&
+    (typeof children !== 'string' || !children.match(/[\n\r]/g))
+  ) {
+    return <Code>{children}</Code>;
+  }
+  // className: "lang-jsx"
+  const language = className && className.split('-');
+  return (
+    <Source
+      language={(language && language[1]) || 'plaintext'}
+      format={false}
+      dark={SourceDarkMode}
+      code={children as string}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/documentation/src/stories/utilities/text/text-color.sample.scss b/packages/documentation/src/stories/utilities/text/text-color.sample.scss
new file mode 100644
index 0000000000..9afdd75af0
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text-color.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  color: post.$success;
+}
diff --git a/packages/documentation/src/stories/utilities/text/text-font-family.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-family.sample.scss
new file mode 100644
index 0000000000..5bc7746e9d
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text-font-family.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  font-family: post.$font-family-sans-serif;
+}
diff --git a/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss
new file mode 100644
index 0000000000..6593337921
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  font-size: post.$font-size-tiny;
+}
diff --git a/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss
new file mode 100644
index 0000000000..dcaeb6e85e
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  font-weight: post.$font-weight-bold;
+}
diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss
new file mode 100644
index 0000000000..21a38d9612
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-element {
+  line-height: post.$line-height-tiny;
+}
diff --git a/packages/documentation/src/stories/utilities/text/text.blocks.tsx b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
index c73d2bb002..b94f812285 100644
--- a/packages/documentation/src/stories/utilities/text/text.blocks.tsx
+++ b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
@@ -4,29 +4,35 @@ import scss from './text.module.scss';
 
 export const SCSS_VARIABLES = parse(scss);
 
-export const TextUtilityAPI = (
-  props: { cssPrefix: string, scssPrefix: string, values: string[] }
-) => (
+export const TextUtilityAPI = (props: {
+  cssPrefix: string;
+  scssPrefix?: string;
+  values: string[];
+}) => (
   <div>
     <dl className="row">
-      {props.cssPrefix && <>
-        <dt className="col-3">Class:</dt>
-        <dd className="col-9">
-          <span className="fs-tiny text-danger">{`.${props.cssPrefix}-{value}`}</span>
-        </dd>
-      </>}
-      {props.scssPrefix && <>
-        <dt className="col-3">
-          Variable:
-        </dt>
-        <dd className="col-9">
-          <span className="fs-tiny text-danger">{`$${props.scssPrefix}-{value}`}</span>
-        </dd>
-      </>}
+      {props.cssPrefix && (
+        <>
+          <dt className="col-3">Class:</dt>
+          <dd className="col-9">
+            <span className="fs-tiny text-danger">{`.${props.cssPrefix}-{value}`}</span>
+          </dd>
+        </>
+      )}
+      {props.scssPrefix && (
+        <>
+          <dt className="col-3">Variable:</dt>
+          <dd className="col-9">
+            <span className="fs-tiny text-danger">{`$${props.scssPrefix}-{value}`}</span>
+          </dd>
+        </>
+      )}
       <dt className="col-3">Values:</dt>
       <dd className="col-9">
         {props.values.map((value, index) => (
-          <code key={value} className="me-2">{value}</code>
+          <code key={value} className="me-2">
+            {value}
+          </code>
         ))}
       </dd>
     </dl>
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 393e369ef5..611cf24b6f 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -1,7 +1,12 @@
-import { Meta, Canvas, Story } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import { SCSS_VARIABLES, TextUtilityAPI } from './text.blocks';
 import * as TextStories from './text.stories';
+import SampleFontFamily from './text-font-family.sample.scss?raw';
+import SampleFontSize from './text-font-size.sample.scss?raw';
+import SampleFontWeight from './text-font-weight.sample.scss?raw';
+import SampleLineHeight from './text-line-height.sample.scss?raw';
+import SampleColor from './text-color.sample.scss?raw';
 
 <Meta of={TextStories} />
 
@@ -19,13 +24,10 @@ import * as TextStories from './text.stories';
 
 #### Set Font Family in SCSS
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  font-family: post.$font-family-sans-serif;
-}
-```
+<Source
+  code={SampleFontFamily}
+  language="scss"
+/>
 
 #### Possible Values
 
@@ -37,13 +39,10 @@ import * as TextStories from './text.stories';
 
 #### Set Font Size in SCSS
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  font-size: post.$font-size-tiny;
-}
-```
+<Source
+  code={SampleFontSize}
+  language="scss"
+/>
 
 #### Possible Values
 
@@ -59,13 +58,10 @@ import * as TextStories from './text.stories';
 
 #### Set Font Weight in SCSS
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  font-weight: post.$font-weight-bold;
-}
-```
+<Source
+  code={SampleFontWeight}
+  language="scss"
+/>
 
 #### Possible Values
 
@@ -93,13 +89,10 @@ import * as TextStories from './text.stories';
 
 #### Set Line Height in SCSS
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  line-height: post.$line-height-tiny;
-}
-```
+<Source
+  code={SampleLineHeight}
+  language="scss"
+/>
 
 #### Possible Values
 
@@ -133,13 +126,10 @@ To colorize links, use the `.link-*` classes instead as they also provide stylin
 
 #### Set the Color in SCSS
 
-```scss dark
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  color: post.$success;
-}
-```
+<Source
+  code={SampleColor}
+  language="scss"
+/>
 
 #### Possible Values
 
diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json
index 0d50cad9f5..cbc27c1363 100644
--- a/packages/documentation/tsconfig.json
+++ b/packages/documentation/tsconfig.json
@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,6 +24,7 @@
     "src/**/*"
   ],
   "exclude": [
-    "node_modules/**/*"
+    "node_modules/**/*",
+    "src/**/*.sample.*"
   ]
 }