diff --git a/src/content/toggle_card.html b/src/content/toggle_card.html
deleted file mode 100644
index 489c236193..0000000000
--- a/src/content/toggle_card.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: Toggle Card
-section: Components
----
-
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>Toggle Card with Checkbox</h3>
-
-		<blockquote class="blockquote blockquote-sm blockquote-success">
-			<p>Checkboxes styled like a card.</p>
-		</blockquote>
-
-		<div class="clay-site-form-container">
-			<label class="toggle-card">
-				<input class="toggle-card-check" type="checkbox" value="">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span>Regular Label</span>
-					</div>
-				</div>
-			</label>
-			<label class="toggle-card">
-				<input class="toggle-card-check" type="checkbox" value="">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span>Regular Label</span>
-					</div>
-				</div>
-			</label>
-			<label class="toggle-card">
-				<input class="toggle-card-check" type="checkbox" value="">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span class="toggle-card-off">labelOff</span>
-						<span class="toggle-card-on">labelOn</span>
-					</div>
-				</div>
-			</label>
-		</div>
-	</div>
-</div>
-
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>Toggle Card with Radio</h3>
-
-		<blockquote class="blockquote blockquote-sm blockquote-success">
-			<p>Radio Buttons styled like a card.</p>
-		</blockquote>
-
-		<div class="clay-site-form-container">
-			<label class="toggle-card">
-				<input class="toggle-card-check" id="toggleCardRadioOption1" name="toggleCardRadio1" type="radio" value="option1">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span>Regular Label</span>
-					</div>
-				</div>
-			</label>
-			<label class="toggle-card">
-				<input class="toggle-card-check" id="toggleCardRadioOption2" name="toggleCardRadio1" type="radio" value="option2">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span>Regular Label</span>
-					</div>
-				</div>
-			</label>
-			<label class="toggle-card">
-				<input class="toggle-card-check" id="toggleCardRadioOption3" name="toggleCardRadio1" type="radio" value="option3">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span class="toggle-card-off">labelOff</span>
-						<span class="toggle-card-on">labelOn</span>
-					</div>
-				</div>
-			</label>
-		</div>
-	</div>
-</div>
-
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>Disabled Toggle Cards</h3>
-
-		<blockquote class="blockquote blockquote-sm blockquote-success">
-			<p>Disable a toggle-card by adding the attribute <code>disabled="disabled"</code> to <code>```<input class="toggle-card-check" type="checkbox">```</code>.</p>
-		</blockquote>
-
-		<div class="clay-site-form-container">
-			<label class="toggle-card">
-				<input class="toggle-card-check" disabled type="checkbox" value="">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span class="toggle-card-off">labelOff</span>
-						<span class="toggle-card-on">labelOn</span>
-					</div>
-				</div>
-			</label>
-			<label class="toggle-card">
-				<input class="toggle-card-check" disabled type="radio" value="">
-				<div class="toggle-card-container">
-					<div class="toggle-card-icon">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-lock toggle-card-off">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#lock" />
-						</svg>
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check toggle-card-on">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#check" />
-						</svg>
-					</div>
-					<div class="toggle-card-label">
-						<span class="toggle-card-off">labelOff</span>
-						<span class="toggle-card-on">labelOn</span>
-					</div>
-				</div>
-			</label>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/src/scss/_components.scss b/src/scss/_components.scss
index 00ada84b57..c140c9ae62 100644
--- a/src/scss/_components.scss
+++ b/src/scss/_components.scss
@@ -26,7 +26,6 @@
 @import "components/_stickers";
 @import "components/_tables";
 @import "components/_tooltip";
-@import "components/_toggle-card";
 @import "components/_toggle-switch";
 @import "components/_type";
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index bdf71ebeaa..c3e17c240f 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -25,7 +25,6 @@
 @import "variables/_stickers";
 @import "variables/_tables";
 @import "variables/_timelines";
-@import "variables/_toggle-card";
 @import "variables/_toggle-switch";
 @import "variables/_tooltip";
 @import "variables/_type";
diff --git a/src/scss/atlas/_variables.scss b/src/scss/atlas/_variables.scss
index ba50aa7d9f..d01a89f592 100644
--- a/src/scss/atlas/_variables.scss
+++ b/src/scss/atlas/_variables.scss
@@ -24,7 +24,6 @@
 @import "variables/_sidebar";
 @import "variables/_tables";
 @import "variables/_timelines";
-@import "variables/_toggle-card";
 @import "variables/_toggle-switch";
 @import "variables/_tooltip";
 @import "variables/_utilities";
\ No newline at end of file
diff --git a/src/scss/atlas/variables/_toggle-card.scss b/src/scss/atlas/variables/_toggle-card.scss
deleted file mode 100644
index 4bb6733731..0000000000
--- a/src/scss/atlas/variables/_toggle-card.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$toggle-card-bg: #FFF !default;
-$toggle-card-border-color: lighten(map-get($theme-colors, secondary), 37%) !default;
-$toggle-card-border-radius: 2px !default;
-$toggle-card-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15) !default;
-$toggle-card-color: map-get($theme-colors, secondary) !default;
-
-$toggle-card-icon-bg: transparent !default;
-$toggle-card-icon-border-color: map-get($theme-colors, secondary) !default;
-$toggle-card-icon-font-size: 24px !default;
-
-// Toggle Card On Styles
-
-$toggle-card-on-border-width: 2px !default;
\ No newline at end of file
diff --git a/src/scss/components/_toggle-card.scss b/src/scss/components/_toggle-card.scss
deleted file mode 100644
index 9fca830cdd..0000000000
--- a/src/scss/components/_toggle-card.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.toggle-card-check {
-	float: left;
-	line-height: normal;
-	position: relative;
-	user-select: none;
-}
-
-.toggle-card-container {
-	background-color: $toggle-card-bg;
-	border: $toggle-card-border-width solid $toggle-card-border-color;
-
-	@include border-radius($toggle-card-border-radius);
-	@include box-shadow($toggle-card-box-shadow);
-
-	color: $toggle-card-color;
-	height: $toggle-card-height;
-	padding: $toggle-card-padding-y $toggle-card-padding-x;
-	text-align: center;
-	width: $toggle-card-width;
-}
-
-.toggle-card-icon {
-	align-items: center;
-	display: flex;
-
-	@include border-radius($toggle-card-icon-border-radius);
-
-	font-size: $toggle-card-icon-font-size;
-	height: $toggle-card-icon-height;
-	justify-content: center;
-	margin-left: auto;
-	margin-right: auto;
-	width: $toggle-card-icon-width;
-
-	.lexicon-icon {
-		margin-top: 0;
-	}
-}
-
-.toggle-card-label {
-	height: $toggle-card-height - $toggle-card-icon-height - ($toggle-card-border-width * 2) - ($toggle-card-padding-y * 2);
-	line-height: 16px;
-	overflow: hidden;
-	padding-top: $toggle-card-padding-y;
-}
-
-.toggle-card .toggle-check {
-	height: auto;
-	width: auto;
-}
-
-.toggle-card-check {
-	height: $toggle-card-height; // toggle should be clickable if not nested inside label
-	margin: 0;
-	opacity: 0;
-	position: absolute;
-	width: $toggle-card-width; // toggle should be clickable if not nested inside label
-
-	&:empty ~ .toggle-card-container {
-		.toggle-card-off {
-			display: block;
-		}
-
-		.toggle-card-on {
-			display: none;
-		}
-
-		.toggle-card-icon {
-			background-color: $toggle-card-icon-bg;
-			border: $toggle-card-icon-border-width solid $toggle-card-icon-border-color;
-		}
-	}
-
-	&:checked ~ .toggle-card-container {
-		background-color: $toggle-card-on-bg;
-		border: $toggle-card-on-border-width solid $toggle-card-on-border-color;
-		color: $toggle-card-on-color;
-		padding-bottom: $toggle-card-padding-y - abs($toggle-card-border-width - $toggle-card-on-border-width);
-		padding-left: $toggle-card-padding-x - abs($toggle-card-border-width - $toggle-card-on-border-width);
-		padding-right: $toggle-card-padding-x - abs($toggle-card-border-width - $toggle-card-on-border-width);
-		padding-top: $toggle-card-padding-y - abs($toggle-card-border-width - $toggle-card-on-border-width);
-
-		.toggle-card-off {
-			display: none;
-		}
-
-		.toggle-card-on {
-			display: block;
-		}
-
-		.toggle-card-icon {
-			background-color: $toggle-card-on-icon-bg;
-			border: $toggle-card-on-icon-border-width solid $toggle-card-on-icon-border-color;
-		}
-	}
-
-	&:focus ~ .toggle-card-container {
-		@include box-shadow(0 0 3px 2px rgba(red($input-focus-border-color), green($input-focus-border-color), blue($input-focus-border-color), 0.6));
-	}
-
-	&[disabled] ~ .toggle-card-container {
-		cursor: not-allowed;
-		opacity: 0.4;
-	}
-}
\ No newline at end of file
diff --git a/src/scss/variables/_toggle-card.scss b/src/scss/variables/_toggle-card.scss
deleted file mode 100644
index 0a80bd006b..0000000000
--- a/src/scss/variables/_toggle-card.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-$toggle-card-bg: $input-bg !default;
-$toggle-card-border-color: $input-border-color !default;
-$toggle-card-border-radius: 4px !default;
-$toggle-card-border-width: 1px !default;
-$toggle-card-box-shadow: null !default;
-$toggle-card-color: $body-color !default;
-
-$toggle-card-height: 104px !default;
-$toggle-card-width: 92px !default;
-
-$toggle-card-padding-x: 12px !default;
-$toggle-card-padding-y: 12px !default;
-
-$toggle-card-icon-bg: transparent !default;
-$toggle-card-icon-border-color: $body-color !default;
-$toggle-card-icon-border-radius: 30px !default;
-$toggle-card-icon-border-width: 0 !default;
-$toggle-card-icon-font-size: 16px !default;
-$toggle-card-icon-height: 32px !default;
-$toggle-card-icon-width: 32px !default;
-
-// Toggle Card On Styles
-
-$toggle-card-on-bg: $toggle-card-bg !default;
-$toggle-card-on-border-color: map-get($theme-colors, primary) !default;
-$toggle-card-on-border-width: 1px !default;
-$toggle-card-on-color: map-get($theme-colors, primary) !default;
-
-$toggle-card-on-icon-bg: transparent !default;
-$toggle-card-on-icon-border-color: $toggle-card-on-border-color !default;
-$toggle-card-on-icon-border-width: 0 !default;
\ No newline at end of file