toggle box

resources/sass/app.scss

@@ -6,6 +6,7 @@
 @import "setup/containers";
 @import "setup/effects";
 
+@import "components/transitions";
 @import "components/btn";
 @import "components/elements";
 @import "components/loader";

resources/sass/components/_transitions.scss

@@ -0,0 +1,6 @@
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+}

resources/sass/setup/_containers.scss

@@ -46,3 +46,34 @@
 
     }
 }
+
+
+.box-toggle {
+    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: $light;
+        padding: 0.5rem 1rem;
+        border-radius: 0.2rem;
+
+        svg {
+            width: 2rem;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}

resources/sass/setup/_reset.scss

@@ -13,3 +13,13 @@ body {
         margin: 0;
     }
 }
+
+ul {
+    margin-top:0;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    li {
+        list-style: none;
+    }
+}