diff --git a/_docs/cards.md b/_docs/cards.md
index 330c0c9a6..7d5e1c6c2 100644
--- a/_docs/cards.md
+++ b/_docs/cards.md
@@ -71,3 +71,9 @@ You can also add the image on the left side of the card. All you need do to is:
 </div>
 {% endexample %}
 
+
+### Card with switch
+
+{% example html columns=1 %}
+{% include cards/card.html title="Card with switch" show-switch=true %}
+{% endexample %}
\ No newline at end of file
diff --git a/_includes/cards/card.html b/_includes/cards/card.html
index 5123f4785..b0a3d8517 100644
--- a/_includes/cards/card.html
+++ b/_includes/cards/card.html
@@ -22,6 +22,11 @@
 			{% elsif include.show-buttons %}
 				<a class="btn btn-secondary btn-sm">Action 1</a>
 				<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
+			{% elsif include.show-switch %}
+			<label class="custom-switch m-0">
+				<input type="checkbox" value="1" class="custom-switch-input" checked>
+				<span class="custom-switch-indicator"></span>
+			</label>
 			{% elsif include.options %}
 				{{ include.options }}
 			{% else %}
diff --git a/cards.html b/cards.html
index 1bccf1aed..59fdf6ed1 100644
--- a/cards.html
+++ b/cards.html
@@ -59,5 +59,8 @@ menu: interface.cards
 		<div class="col-lg-6">
 			{% include cards/card.html title="Card with alert" alert="Adding action was failed" alert-type="danger" %}
 		</div>
+		<div class="col-lg-6">
+			{% include cards/card.html title="Card with switch" show-switch=true %}
+		</div>
 	</div>
 </div>
\ No newline at end of file