carbon-design-system · AlexanderMelox · Apr 2, 2025 · Mar 26, 2025 · Mar 28, 2025 · Mar 31, 2025
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
@@ -0,0 +1,4 @@
+{
+  "label": "Full Page Error",
+  "template": "node"
+}
@@ -0,0 +1,34 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>carbon-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="src/styles.scss" />
+    <script type="module" src="src/index.js"></script>
+  </head>
+  <body>
+    <div class="example-container">
+      <div class="example-header"></div>
+      <div id="page-content-selector" class="example-content">
+        <c4p-full-page-error
+          label="Error ###"
+          title="Error title"
+          description="This is a description of the error."
+          kind="custom"
+        >
+          <a class="cds--link cds--link--lg" href="#">– Forwarding link 1</a>
+          <br />
+          <a class="cds--link cds--link--lg" href="#">– Forwarding link 2</a>
+        </c4p-full-page-error>
+      </div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "full-page-error",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM Products.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache"
+  },
+  "dependencies": {
+    "@carbon/ibm-products-web-components": "^0.10.0-rc.0",
+    "lit": "^3.2.1",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "vite": "5.4.12"
+  }
+}
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/ibm-products-web-components/es/components/full-page-error/index.js';
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
+
+.example-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.example-header {
+  background: #393939;
+}
+
+.example-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});
@@ -10,6 +10,11 @@ Display a full-page error when the requested page is unavailable to the user.
 This is typically caused by issues with the requested URL or access permissions.
 Errors caused by server connectivity issues are not covered in this guideline.
 
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/full-page-error)
+> example implementation.
+> [![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components/examples/full-page-error)
+
 ## Getting started
 
 Here's a quick example to get you started.