docs: pattern for sorry pages

.changeset/swift-dragons-add.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added a pattern for error pages with an image. Currently available is a graphic for "404 not found" errors. More error types may be supported in the future.

packages/documentation/src/stories/templates/error-page/error-page.docs.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as ErrorPageStories from './error-page.stories';
+
+<Meta of={ErrorPageStories} />
+
+<div class="container">
+  # Error page template
+
+  A generic error page pattern with an image. The image can be exchanged based on the type of error.
+
+  - 404 not found: <a download href="/images/content/404.png">Download "404 not found" image</a>
+</div>
+
+<Canvas of={ErrorPageStories.Default} />

packages/documentation/src/stories/templates/error-page/error-page.stories.ts

@@ -0,0 +1,62 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+import { html } from 'lit';
+
+const meta: Meta = {
+  id: 'a536a61d-cac2-4f39-adbf-092bdd445ce5',
+  title: 'Patterns/Error page',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+    layout: 'fullscreen',
+  },
+  render,
+  decorators: [
+    story => html`
+      <swisspost-internet-header project="test"></swisspost-internet-header>
+      <div class="container my-4">
+        <swisspost-internet-breadcrumbs hide-buttons></swisspost-internet-breadcrumbs>
+      </div>
+      ${story()}
+      <swisspost-internet-footer></swisspost-internet-footer>
+    `,
+  ],
+};
+
+function render(args: Args) {
+  return html`
+    <div class="bg-light error-container">
+      <div class="container">
+        <div class="row">
+          <div class="col-rg-8 py-huge">
+            <h2>
+              This page could not be found.
+              <br />
+              <span class="fw-light">A reasons for this could be a misspelled URL.</span>
+            </h2>
+            <p class="mt-3">
+              We kindly ask you to review this once again. It is also possible that we have moved,
+              archived, or renamed the relevant page. Perhaps you can find the content you're
+              looking for on our homepage. Or use the search on our portal to locate the desired
+              page.
+            </p>
+            <div class="d-flex gap-3 mt-4">
+              <a class="btn btn-primary" href="/">Home page</a>
+              <a class="btn btn-secondary" href="https://www.post.ch/de/pages/suche#t=AllTab">
+                Search
+              </a>
+            </div>
+          </div>
+          <div class="col-6 offset-3 offset-rg-0 col-rg-4 align-self-end">
+            <img class="error-container--image" src="/images/content/404.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/styles/src/components/_index.scss

@@ -13,6 +13,7 @@
 @use 'carousel';
 @use 'close';
 @use 'elevation';
+@use 'error-container';
 @use 'form-range';
 @use 'form-select';
 @use 'form-textarea';

packages/styles/src/components/error-container.scss

@@ -0,0 +1,9 @@
+.error-container {
+  overflow-x: hidden;
+}
+
+.error-container--image {
+  max-width: 150%;
+  margin: 10vw 0 0 3rem;
+  object-fit: contain;
+}