diff --git a/chip-list.js b/chip-list.js
index d3583b3..e2de461 100644
--- a/chip-list.js
+++ b/chip-list.js
@@ -9,7 +9,7 @@ class ChipList extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-chip-list {
                 display: flex;
                 flex-direction: row;
diff --git a/chip.js b/chip.js
index f1610f1..054c19f 100644
--- a/chip.js
+++ b/chip.js
@@ -15,7 +15,7 @@ class Chip extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-chip {
                 border-radius: 1em;
                 background-color: #e0e0e0;
diff --git a/circular-progress.js b/circular-progress.js
index cf7bc76..7d97b10 100644
--- a/circular-progress.js
+++ b/circular-progress.js
@@ -7,7 +7,7 @@ class CircularProgress extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
         mt-circular-progress > div > svg {
             position: absolute;
             z-index: 999999;
diff --git a/collapsable-region.js b/collapsable-region.js
index 88661a4..a0fca11 100644
--- a/collapsable-region.js
+++ b/collapsable-region.js
@@ -7,7 +7,7 @@ class CollapsableRegion extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-collapsable-region .title:hover {
                 cursor: pointer;
             }
diff --git a/drawer.js b/drawer.js
new file mode 100644
index 0000000..1488bad
--- /dev/null
+++ b/drawer.js
@@ -0,0 +1,94 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
+
+class Drawer extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return /*css*/`
+            mt-drawer > div {
+                position: relative;
+                background-color: #f8f9fa;
+            }
+
+            mt-drawer > div.absolute {
+                position: absolute;
+            }
+
+            mt-drawer > div.left {
+                left: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.right {
+                right: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.top {
+                top: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.bottom {
+                bottom: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.show {
+                display: flex;
+                flex-direction: column;
+            }
+
+            mt-drawer > div {
+                display: none;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            show: true,
+            responsiveClasses: "d-none d-md-flex",
+            position: "left",
+            width: "20em",
+            height: null,
+            padding: "1em",
+            absolute: true
+        };
+    }
+
+    render() {
+        return this.template
+            .child(
+                new div()
+                    .class(this.responsiveClasses)
+                    .class(this.show, (value) => { return value ? "show" : null })
+                    .class(this.absolute, (value) => { return value ? "absolute" : null })
+                    .class(this.position)
+                    .style("width", this.width)
+                    .style("height", this.height)
+                    .style("padding", this.padding)
+                    .child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
+                    .child(new slot(this))
+            );
+    }
+}
+
+class DrawerTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-drawer", children);
+    }
+}
+
+export {
+    DrawerTemplate as Drawer
+};
+
+customElements.define("mt-drawer", Drawer);
\ No newline at end of file
diff --git a/editable-image.js b/editable-image.js
index 9fb089d..9b4c9a5 100644
--- a/editable-image.js
+++ b/editable-image.js
@@ -7,7 +7,7 @@ class EditableImage extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-editable-image {
                 position: relative;
                 display: flex;
diff --git a/editable-label.js b/editable-label.js
index 489c65b..bc39464 100644
--- a/editable-label.js
+++ b/editable-label.js
@@ -8,7 +8,7 @@ class EditableLabel extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-editable-label {
                 display: flex;
                 flex-direction: row;
diff --git a/icon-tabs.js b/icon-tabs.js
index 1606bb1..873868d 100644
--- a/icon-tabs.js
+++ b/icon-tabs.js
@@ -8,7 +8,7 @@ class IconTabs extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-icon-tabs > .icons {
                 display: flex;
                 flex-direction: row;
diff --git a/linear-progress.js b/linear-progress.js
index 2f09d4c..7056378 100644
--- a/linear-progress.js
+++ b/linear-progress.js
@@ -7,7 +7,7 @@ class LinearProgress extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-linear-progress {
                 display: flex;
                 align-items: center;
diff --git a/pagination-list.js b/pagination-list.js
index 278b66e..03e2f63 100644
--- a/pagination-list.js
+++ b/pagination-list.js
@@ -16,7 +16,7 @@ class PaginationList extends IgniteElement {
     }
 
     get styles() {
-        return `
+        return /*css*/`
             mt-pagination-list .list-container {
                 display: flex;
                 flex-direction: row;