Cool, item containeers are now collapsable

src/components/Collapsable.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="collapsable">
-        <input id="collapsible" class="toggle" type="checkbox">
-        <label for="collapsible" class="lbl-toggle" tabindex="0">More Info</label>
+        <input id="collapsible" class="toggle" type="checkbox" checked>
+        <label for="collapsible" class="lbl-toggle" tabindex="0">
+            <h2>{{ title }}</h2>
+        </label>
         <div class="collapsible-content">
             <div class="content-inner">
-            <p>
-                QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
-                its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
-                plug-ins. Test-Driven Development.
-            </p>
+            <slot></slot>
             </div>
         </div>
   </div>
@@ -16,9 +14,9 @@
 
 <script>
 export default {
-  name: 'Footer',
+  name: 'CollapsableContainer',
   props: {
-   
+    title: String
   }
 }
 </script>
@@ -27,8 +25,15 @@ export default {
 <style scoped lang="scss">
 
 .collapsable {
-    border: 2px dashed red;
-
+    min-width: 350px;
+    padding: 5px;
+    margin: 10px;
+    border-radius: 10px;
+    background: #1CA8DD;
+    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    box-shadow: 1px 1px 2px #130f23;
+    
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;
     }
@@ -37,34 +42,33 @@ export default {
         display: none;
     }
 
+    label {
+        outline: none;
+    }
+
     .lbl-toggle {
         display: block;
-
-        font-weight: bold;
-        font-family: monospace;
-        font-size: 1.2rem;
-        text-transform: uppercase;
-        text-align: center;
-
         padding: 1rem;
-
-        color: #A77B0E;
-        background: #FAE042;
-
         cursor: pointer;
-
         border-radius: 7px;
         transition: all 0.25s ease-out;
+        text-align: left;
+        color: #2f323ae6;
+
+        h2 {
+            margin: 0;
+            padding: 0;
+            display: inline;
+        }
     }
 
     .lbl-toggle:hover {
-        color: #7C5A0B;
+        color: #2f323a;
     }
 
     .lbl-toggle::before {
         content: ' ';
         display: inline-block;
-
         border-top: 5px solid transparent;
         border-bottom: 5px solid transparent;
         border-left: 5px solid currentColor;
@@ -83,6 +87,8 @@ export default {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
+        background: #2f323ae6;
+        border-radius: 0 0 10px 10px;
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {
@@ -95,11 +101,7 @@ export default {
     }
 
     .collapsible-content .content-inner {
-        background: rgba(250, 224, 66, .2);
-        border-bottom: 1px solid rgba(250, 224, 66, .45);
-        border-bottom-left-radius: 7px;
-        border-bottom-right-radius: 7px;
-        padding: .5rem 1rem;
+        padding: 0.5rem 1rem;
     }
 }
 </style>

src/views/Home.vue

@@ -13,7 +13,9 @@
       <ItemGroup title="External Infrastructure"/>
       <ItemGroup title="Utilities"/>
 
-      <Collapsable />>
+      <Collapsable title="Server Management">
+        <p>Lorem Ipsum</p>
+      </Collapsable>
     </div>
   </div>
 </template>
@@ -61,6 +63,8 @@ span.subtitle {
 .item-group-container {
   display: flex;
   margin: 2em 0;
+  align-items:flex-start;
+  align-content:flex-start;
   .item-group-outer {
     margin: 10px;
   }