diff --git a/src/pages/_includes/cards/card-tabs.html b/src/pages/_includes/cards/card-tabs.html
index 03e5d44f030cefa39de8ad335534346700b8a668..f2f145c670fc155e3760217cc6be803e38f746d0 100644
--- a/src/pages/_includes/cards/card-tabs.html
+++ b/src/pages/_includes/cards/card-tabs.html
@@ -28,7 +28,12 @@
 {% endcapture %}
 
 <!-- Cards with tabs component -->
-<div class="card-tabs">
+<div class="
+   card-tabs 
+   {% if include.borderless %}
+   border-0
+   {% endif %}
+">
    {% if include.bottom %}
       {{ tabs-content-html }}
       {{ tabs-html }}
diff --git a/src/pages/cards.html b/src/pages/cards.html
index 8c969d3c9b442265cbb472a791870c2acb04bb10..54447f874d179ace9a014ff600567253187d007f 100644
--- a/src/pages/cards.html
+++ b/src/pages/cards.html
@@ -8,6 +8,7 @@ menu: base.cards
 	<div class="col-md-6 col-xl-4">
 		<div class="row row-cards">
 			<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
+			<div class="col-12 border-0">{% include cards/card.html body="This is a borderless card." %}</div>
 			<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
 			<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
 			<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>
@@ -18,6 +19,7 @@ menu: base.cards
 			<div class="col-12">{% include cards/card.html progress=true title="Card with progress bar" %}</div>
 			<div class="col-12">{% include cards/card.html empty=true %}</div>
 			<div class="col-12">{% include cards/card-tabs.html count=4 %}</div>
+			<div class="col-12">{% include cards/card-tabs.html count=4 borderless=true %}</div>
 			<div class="col-12">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
 		</div>
 	</div>