diff --git a/src/components/panel/Panel.spec.tsx b/src/components/panel/Panel.spec.tsx
index 3fb8232c..79442246 100644
--- a/src/components/panel/Panel.spec.tsx
+++ b/src/components/panel/Panel.spec.tsx
@@ -5,6 +5,7 @@ import 'jest-styled-components';
 
 import { ThemeProvider } from '../theme-provider';
 import { Panel } from './index';
+import { ElevationHeight } from '../elevated';
 
 const setup = (panel: React.ReactElement) =>
     render(<ThemeProvider>{panel}</ThemeProvider>);
@@ -28,3 +29,14 @@ test('it works loading', () => {
     const { container } = setup(<Panel loading>Hello world</Panel>);
     expect(container.firstChild).toMatchSnapshot();
 });
+
+test('it works with elevation', () => {
+    const elevations: ElevationHeight[] = ['1', '2', '3', '4'];
+
+    elevations.forEach((elevation) => {
+        const { container } = setup(
+            <Panel elevation={elevation}>Hello world</Panel>
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
diff --git a/src/components/panel/__snapshots__/Panel.spec.tsx.snap b/src/components/panel/__snapshots__/Panel.spec.tsx.snap
index 0ff84832..689f5a34 100644
--- a/src/components/panel/__snapshots__/Panel.spec.tsx.snap
+++ b/src/components/panel/__snapshots__/Panel.spec.tsx.snap
@@ -119,6 +119,82 @@ exports[`it works loading 1`] = `
 </div>
 `;
 
+exports[`it works with elevation 1`] = `
+.c0 {
+  border-radius: 0.3rem;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: white;
+}
+
+<div
+  class="c0"
+>
+  Hello world
+</div>
+`;
+
+exports[`it works with elevation 2`] = `
+.c0 {
+  border-radius: 0.3rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 10px 13px rgba(0,0,0,0.02),0 -10px 13px rgba(0,0,0,0.02);
+  min-height: 8rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: white;
+}
+
+<div
+  class="c0"
+>
+  Hello world
+</div>
+`;
+
+exports[`it works with elevation 3`] = `
+.c0 {
+  border-radius: 0.3rem;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.16),-10px 15px 15px rgba(0,0,0,0.03),10px 0px 15px rgba(0,0,0,0.03);
+  min-height: 8rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: white;
+}
+
+<div
+  class="c0"
+>
+  Hello world
+</div>
+`;
+
+exports[`it works with elevation 4`] = `
+.c0 {
+  border-radius: 0.3rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.18),-15px 20px 20px rgba(0,0,0,0.04),15px -5px 20px rgba(0,0,0,0.04);
+  min-height: 8rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: white;
+}
+
+<div
+  class="c0"
+>
+  Hello world
+</div>
+`;
+
 exports[`it works with heading 1`] = `
 .c0 {
   border-radius: 0.3rem;