dropdown card

pages/tmp3.html

+---
+tmp: true
+---
+
+<div class="dropdown d-inline-block">
+	<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonAlias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		Dropdown button
+	</button>
+
+	<ul class="dropdown-menu">
+		<li>
+			<a class="dropdown-item" href="#">Action</a>
+		</li>
+		<li>
+			<a class="dropdown-item" href="#">Another action</a>
+		</li>
+		<li class="dropright">
+			<a class="dropdown-item dropdown-toggle" href="#" id="dropdownSubmenuButton" data-toggle="dropdown">Something else here</a>
+			<div class="dropdown-menu">
+				<a class="dropdown-item" href="#">Action</a>
+				<a class="dropdown-item" href="#">Another action</a>
+				<a class="dropdown-item" href="#">Something else action</a>
+			</div>
+		</li>
+	</ul>
+</div>
+
+<div class="dropdown d-inline-block">
+	<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+		Dropdown with card
+	</button>
+	{% include cards/card.html class="dropdown-menu" title="Card title" footer=true img-top=true  %}
+</div>
\ No newline at end of file

scss/_variables.scss

@@ -271,6 +271,9 @@ $dropdown-spacer: 1px !default;
 $dropdown-link-active-color: $primary !default;
 $dropdown-link-active-bg: $active-bg !default;
 
+$dropdown-border-color: $border-color !default;
+$dropdown-menu-max-width: 25rem !default;
+
 //grid
 $grid-gutter-width: 1.5rem !default;
 
@@ -377,8 +380,6 @@ $input-placeholder-color: $text-muted !default;
 $input-group-addon-bg: $min-black !default;
 $input-group-addon-color: $text-muted !default;
 
-$dropdown-border-color: $border-color !default;
-
 $input-border-radius: $border-radius !default;
 
 

scss/ui/_cards.scss

@@ -343,14 +343,6 @@ Card avatar
   box-shadow: 0 0 0 .5rem $card-bg;
 }
 
-/*
-Card img top
- */
-.card-img-top,
-.card-img-bottom {
-  border-radius: inherit;
-}
-
 /*
 Card list group
  */

scss/ui/_dropdowns.scss

@@ -12,6 +12,16 @@
     text-align: center;
     stroke-width: 2px;
   }
+
+  &.card {
+    padding: 0;
+    min-width: $dropdown-menu-max-width;
+    display: none;
+
+    &.show {
+      display: flex;
+    }
+  }
 }
 
 .dropdown-header {