diff --git a/src/components/VAudioElementWrapper.vue b/src/components/VAudioElementWrapper.vue
index 35a343b..256f2b9 100644
--- a/src/components/VAudioElementWrapper.vue
+++ b/src/components/VAudioElementWrapper.vue
@@ -17,7 +17,7 @@ const TIMEOUT_MESSAGE = 'timed out';
 const CAN_PLAY_MESSAGE = 'can play';
 
 @Component({ })
-export default class AudioElementWrapper extends Vue {
+export default class VAudioElementWrapper extends Vue {
   @Prop({ default: false }) readonly canPause!: boolean;
   @Prop({ default: 1000 }) readonly timeOut!: number;
   @Prop({ default: () => [] }) readonly sources!: string[];
diff --git a/src/components/VCardDock.vue b/src/components/VCardDock.vue
new file mode 100644
index 0000000..03f4a4c
--- /dev/null
+++ b/src/components/VCardDock.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="card-dock w-100 d-flex flex-column flex-xl-row">
+    <div class="col">
+      <slot name="leftCol">
+      </slot>
+    </div>
+    <div class="col" v-if="hasRightCol()">
+      <slot name="rightCol">
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class VCardDock extends Vue {
+  hasRightCol() {
+    return !!this.$slots.rightCol || !!this.$scopedSlots.rightCol;
+  }
+}
+</script>
diff --git a/src/components/VDockableCard.vue b/src/components/VDockableCard.vue
new file mode 100644
index 0000000..530313a
--- /dev/null
+++ b/src/components/VDockableCard.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="v-dockable-card shadow-sm w-100">
+    <div class="v-dockable-card-header" v-if="showHeader">
+      <slot name="header">
+        <h6>{{title}}</h6>
+      </slot>
+    </div>
+    <div class="v-dockable-card-container">
+      <slot name="body">
+        <p>Body</p>
+      </slot>
+    </div>
+    <div class="v-dockable-card-footer" v-if="hasFooter">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component
+export default class VDockableCard extends Vue {
+  @Prop({ default: () => 'Titolo' }) readonly title!: string;
+  @Prop({ default: true }) readonly showHeader!: boolean;
+
+  get hasFooter() {
+    return !!this.$slots.footer
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import '@/css/vue';
+.v-dockable-card {
+  background-color: $white;
+  border: 1px solid $gray-300;
+  &-header {
+    padding: 1rem 0.5rem;
+    border-bottom: 1px solid $gray-300;
+    h6 {
+      margin: 0;
+    }
+  }
+  &-container {
+    padding: 1rem 0.5rem;
+  }
+  &-footer {
+    border-top: 1px solid $gray-300;
+    padding: 1rem 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/VSlottedSelect.vue b/src/components/VSlottedSelect.vue
new file mode 100644
index 0000000..5d79ce1
--- /dev/null
+++ b/src/components/VSlottedSelect.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="slotted-select" v-click-outside="closeDropdown">
+    <div class="form-group">
+      <label>{{label}}</label>
+      <div class="slotted-select-selected d-flex h-100" @click="toggle">
+        <slot name="selected" :selected="selectedItem">
+        </slot>
+      </div>
+    </div>
+    <div class="w-100 slotted-select-options shadow-sm " v-if="isOpen" :style="{'height': dropDownSize+'px'}">
+      <div class="slotted-select-options-grouped" v-if="hasGroups">
+        <div class="slotted-select-options-grouped-block" v-for="group in groups" :key="group.name">
+          <div class="slotted-select-options-grouped-block-header">
+            <slot name="group-header" v-bind:group="group">
+            </slot>
+          </div>
+          <div class="slotted-select-options-items d-flex h-100" v-for="item in group.items" :key="item.id" @click="select(item, group)">
+            <slot name="item" v-bind:item="item">
+            </slot>
+          </div>
+        </div>
+      </div>
+      <div class="slotted-select-options-grouped" v-else>
+        <div class="slotted-select-options-items d-flex h-100" v-for="item in items" :key="item.id" @click="select(item)">
+          <slot name="item" :item="item">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import ClickOutside from '../directives/ClickOutside';
+
+export type SlottedSelectGroup = {
+  id: string;
+  name: string;
+  items: SlottedSelectItem[];
+}
+
+export type SlottedSelectItem = {
+  icon: string | null;
+  id: string;
+  text: string;
+  additional: string | null;
+}
+
+@Component({ directives: { ClickOutside } })
+export default class VSlottedSelect extends Vue {
+  @Prop({ default: 'Label' }) readonly label!: string;
+  @Prop({ required: true }) readonly selected!: SlottedSelectItem;
+  @Prop({ default: () => { return [] } }) readonly items!: SlottedSelectItem[];
+  @Prop({ default: () => { return [] } }) readonly groups!: SlottedSelectGroup[];
+  @Prop({ default: 400 }) readonly dropDownSize!: number;
+
+  private selectedItem = Object.assign({}, this.selected);
+  isOpen = false;
+
+  get hasGroups() {
+    return this.groups.length > 0;
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  closeDropdown() {
+    this.isOpen = false;
+  }
+
+  select(item: SlottedSelectItem, group?: SlottedSelectGroup) {
+    this.selectedItem = item;
+    this.$emit('selected', item, group);
+    this.isOpen = false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/css/vue";
+.slotted-select {
+  color: $black;
+  width: 100%;
+  user-select: none;
+  position: relative;
+  .form-group {
+    label {
+      color: $black;
+    }
+    margin-bottom: 5px;
+  }
+  &-selected {
+    background-color: $white;
+    border-radius: 4px;
+    padding: .5rem 1rem;
+    border: 1px solid $gray-300;
+    color: $black;
+  }
+  &-options {
+    z-index: 11;
+    overflow-y: auto;
+    background-color: $white;
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid $gray-300;
+    &-items {
+      padding: .25rem 1rem 0.25rem 1rem;
+    }
+    &-items:first-child {
+      padding: .5rem 1rem 0.25rem 1rem;
+    }
+    &-items:last-child {
+      padding: .25rem 1rem 0.5rem 1rem;
+    }
+    &-items:hover {
+      background-color: $primary;
+      color: $white;
+    }
+    &-grouped-block-header {
+      padding: 0.125rem;
+    }
+  }
+}
+</style>
diff --git a/src/components/VSlottedSelectItem.vue b/src/components/VSlottedSelectItem.vue
new file mode 100644
index 0000000..94c427e
--- /dev/null
+++ b/src/components/VSlottedSelectItem.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="medium-selector-item w-100 d-flex justify-content-between">
+    <div class="d-flex align-items-center">
+      <v-icon size="lg">{{item.icon}}</v-icon>
+      <span class="ml-2">{{item.text}}</span>
+    </div>
+    <div class="d-flex align-items-center">
+      <span class="text-muted">{{item.additional}}</span>
+      <v-icon size="xs" class="ml-2" v-if="hasChevron">chevron-down</v-icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { SlottedSelectItem } from './VSlottedSelect.vue';
+import VIcon from './VIcon.vue';
+
+@Component({ components: { VIcon } })
+export default class VSlottedSelectItem extends Vue {
+  @Prop({ required: true }) readonly item!: SlottedSelectItem;
+  @Prop({ default: false }) readonly hasChevron!: boolean;
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/styleguide/Styleguide.vue b/src/styleguide/Styleguide.vue
index 3fd2c7f..17bb982 100644
--- a/src/styleguide/Styleguide.vue
+++ b/src/styleguide/Styleguide.vue
@@ -747,6 +747,129 @@
                 ></v-modal-video>
               </div>
               <pre><code>&lt;v-modal-video title='title' :sources="[urls]" size="xl"/&gt;</code></pre>
+              <hr />
+            </div>
+            <div id="VDockableCard">
+              <h4>VDockableCard</h4>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-dockable-card></v-dockable-card>
+              </div>
+              <pre><code>&lt;v-dockable-card&gt;&lt;/v-dockable-card&gt;</code></pre>
+              <h5>VDockableCard with title, body slot and footer slot</h5>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-dockable-card title="My title">
+                  <template v-slot:body>
+                    <p class="m-0">I am a body slot</p>
+                  </template>
+                  <template v-slot:footer>
+                    <p class="m-0">I am a footer slot</p>
+                  </template>
+                </v-dockable-card>
+              </div>
+              <pre><code>&lt;v-dockable-card title="My title" &gt;&lt;/v-dockable-card&gt;</code></pre>
+              <h5>VDockableCard with header slot, body slot and footer slot</h5>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-dockable-card title="My title">
+                  <template v-slot:header>
+                    <h3>Larger header</h3>
+                  </template>
+                  <template v-slot:body>
+                    <p class="m-0">I am a body slot</p>
+                  </template>
+                  <template v-slot:footer>
+                    <p class="m-0">I am a footer slot</p>
+                  </template>
+                </v-dockable-card>
+              </div>
+              <pre><code>&lt;v-dockable-card&gt;&hellip;&lt;/v-dockable-card&gt;</code></pre>
+              <h5>Headless VDockableCard</h5>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-dockable-card :showHeader="false">
+                </v-dockable-card>
+              </div>
+              <pre><code>&lt;v-dockable-card :showHeader="false"&gt;&lt;/v-dockable-card&gt;</code></pre>
+              <hr />
+            </div>
+            <div id="VCardDock">
+              <h4>VCardDock</h4>
+              <h5>Single column (slot leftCol)</h5>
+              <div class="mb-3">
+                <v-card-dock>
+                  <template v-slot:leftCol>
+                    <v-dockable-card></v-dockable-card>
+                  </template>
+                </v-card-dock>
+              </div>
+              <pre><code>&lt;v-card-dock&gt;&lt;template v-slot:leftCol&gt;&hellip;&lt;/template&gt;&lt;/v-card-dock&gt;</code></pre>
+              <h5>Two columns (also with slot rightCol)</h5>
+              <div class="mb-3">
+                <v-card-dock>
+                  <template v-slot:leftCol>
+                    <v-dockable-card class="mb-3">
+                      <template v-slot:body>
+                        <p>A lot of text here <br/> But this won't affect the right column</p>
+                      </template>
+                    </v-dockable-card>
+                    <v-dockable-card class="mb-3">
+                      <template v-slot:body>
+                        <p>... and another lot of text here too</p>
+                      </template>
+                    </v-dockable-card>
+                  </template>
+                  <template v-slot:rightCol>
+                    <v-dockable-card class="mb-3"></v-dockable-card>
+                    <v-dockable-card class="mb-3"></v-dockable-card>
+                  </template>
+                </v-card-dock>
+              </div>
+              <pre><code>&lt;v-card-dock&gt;&lt;template v-slot:leftCol&gt;&hellip;&lt;/template&gt;&lt;template v-slot:rightCol&gt;&hellip;&lt;/template&gt;&lt;/v-card-dock&gt;</code></pre>
+              <hr/>
+            </div>
+            <div id="VSlottedSelect">
+              <h4>VSlottedSelect</h4>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-slotted-select label="My awesome label" :selected="slottedModel" :items="slottedItems">
+                  <template v-slot:selected="{ selected }">
+                    <v-slotted-select-item :item="selected" :hasChevron="true"/>
+                  </template>
+                  <template v-slot:item="{ item }">
+                    <v-slotted-select-item :item="item" />
+                  </template>
+                </v-slotted-select>
+              </div>
+              <pre><code>&lt;v-slotted-select label="My awesome label" :selected="..." :items="..."&gt;&lt;template v-slot:selected="{ selected }"&gt;&hellip;&lt;/template&gt;&lt;template v-slot:item="{ item }"&gt;&lt;/v-slotted-select&gt;</code></pre>
+              <h5>VSlottedSelect with groups (items template uses slotted-select-item component)</h5>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-slotted-select :selected="slottedModel" :groups="slottedGroups">
+                  <template v-slot:selected="{ selected }">
+                    <v-slotted-select-item :item="selected" :hasChevron="true"/>
+                  </template>
+                  <template v-slot:group-header="{ group }">
+                    <div class="d-flex align-items-center">
+                      <span class="text-muted group-label px-1">{{group.name}}</span>
+                    </div>
+                  </template>
+                  <template v-slot:item="{ item }">
+                    <v-slotted-select-item :item="item" />
+                  </template>
+                </v-slotted-select>
+              </div>
+              <pre><code>&lt;v-slotted-select :selected="..." :groups="..."&gt;&lt;template v-slot:selected="{ selected }"&gt;&hellip;&lt;/template&gt;&lt;template v-slot:group-header="{ group }"&gt;&hellip;&lt;/template&gt;&lt;template v-slot:item="{ item }"&gt;&hellip;&lt;/template&gt;&lt;/v-slotted-select&gt;</code></pre>
+              <h5>VSlottedSelect with groups templates are simple p tags...</h5>
+              <div class="mb-3 d-flex align-items-center justify-content-between">
+                <v-slotted-select :selected="slottedModel" :groups="slottedGroups">
+                  <template v-slot:selected="{ selected }">
+                    <p class="m-0">{{selected.text}}</p>
+                  </template>
+                  <template v-slot:group-header="{ group }">
+                    <p class="m-0">{{group.name}}</p>
+                  </template>
+                  <template v-slot:item="{ item }">
+                    <p class="m-0">{{item.text}}</p>
+                  </template>
+                </v-slotted-select>
+              </div>
+              <pre><code>&lt;v-slotted-select :selected="..." :groups="..."&gt;&lt;template v-slot:selected="{ selected }"&gt;&hellip;&lt;/template&gt;&lt;template v-slot:group-header="{ group }"&gt;&hellip;&lt;/template&gt;&lt;template v-slot:item="{ item }"&gt;&hellip;&lt;/template&gt;&lt;/v-slotted-select&gt;</code></pre>
             </div>
           </div>
         </div>
@@ -838,9 +961,10 @@
                 ><a href="#VAudio">VAudio</a>
               </li>
               <li class="list-group-item"><a href="#VVideo">VVideo</a></li>
-              <li class="list-group-item">
-                <a href="#VModalVideo">VModalVideo</a>
-              </li>
+              <li class="list-group-item"><a href="#VModalVideo">VModalVideo</a></li>
+              <li class="list-group-item"><a href="#VDockableCard">VDockableCard</a></li>
+              <li class="list-group-item"><a href="#VCardDock">VCardDock</a></li>
+              <li class="list-group-item"><a href="#VSlottedSelect">VSlottedSelect</a></li>
             </ul>
           </div>
         </div>
@@ -879,6 +1003,10 @@ import VComparisonGroupSelect from '../components/VComparisonGroupSelect.vue';
 import VAudio from '../components/VAudio.vue';
 import VVideo from '../components/VVideo.vue';
 import VModalVideo from '../components/VModalVideo.vue';
+import VDockableCard from '../components/VDockableCard.vue';
+import VCardDock from '../components/VCardDock.vue';
+import VSlottedSelect, { SlottedSelectGroup, SlottedSelectItem } from '../components/VSlottedSelect.vue';
+import VSlottedSelectItem from '../components/VSlottedSelectItem.vue';
 import VSplitDateSelect from '@/components/VSplitDateSelect.vue';
 
 import { Component, Vue } from 'vue-property-decorator';
@@ -913,7 +1041,11 @@ import { Component, Vue } from 'vue-property-decorator';
     VSplitDateSelect,
     VAudio,
     VVideo,
-    VModalVideo
+    VModalVideo,
+    VDockableCard,
+    VCardDock,
+    VSlottedSelect,
+    VSlottedSelectItem
   }
 })
 export default class Styleguide extends Vue {
@@ -1090,6 +1222,48 @@ export default class Styleguide extends Vue {
 
   gItems: EntryGroupItem[] = [];
 
+  slottedModel: SlottedSelectItem = {
+    id: '-',
+    text: 'Select me',
+    icon: 'play',
+    additional: 'nothing serious'
+  };
+
+  slottedItems: SlottedSelectItem[] = [
+    {
+      id: '-',
+      text: 'Select me',
+      icon: 'play',
+      additional: 'nothing serious'
+    },
+    {
+      id: 'a',
+      icon: 'audio',
+      text: 'Audio',
+      additional: 'specimen'
+    }
+  ];
+
+  slottedGroups: SlottedSelectGroup[] = [
+    {
+      id: 'g-a',
+      name: 'GROUP A',
+      items: this.slottedItems
+    },
+    {
+      id: 'g-b',
+      name: 'GROUP B',
+      items: [
+        {
+          id: 'c',
+          icon: 'timer',
+          text: 'I don\'t have additionals',
+          additional: ''
+        }
+      ]
+    }
+  ];
+
   public loadGroups(payload: any): Promise<EntryGroupItem[]> {
     return Promise.resolve(this.gItems);
   }