@clayui/css 3.161.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_cards.scss

@@ -1,543 +1,561 @@
-@if ($enable-atlas-custom-properties) {
-	$card-bg: var(--card-bg, $white);
-	$card-border-color: var(
-		--card-border-color,
-		unquote('hsl(from #{$black} h s l / 0.125)')
-	);
-	$card-border-style: var(--card-border-style, solid);
-	$card-border-width: var(--card-border-width, 0px);
-
-	$card-border-radius: var(--card-border-radius, $border-radius);
-	$card-inner-border-radius: calc(
-		#{$card-border-radius} - #{$card-border-width}
-	);
-
-	$card-box-shadow: var(--card-box-shadow, 0 1px 3px -1px rgba(0, 0, 0, 0.6));
-	$card-color: var(--card-color, inherit);
-	$card-height: null;
-	$card-margin-bottom: var(--card-margin-bottom, 24px);
-
-	$card-spacer-x: var(--card-spacer-x, 20px);
-	$card-spacer-y: var(--card-spacer-y, 12px);
-
-	$card-cap-bg: unquote('hsl(from #{$black} h s l / 0.03)');
-	$card-cap-color: null;
-
-	// .card-body
-
-	$card-body-padding-bottom: var(--card-body-padding-bottom, 16px);
-	$card-body-padding-left: var(--card-body-padding-left, 16px);
-	$card-body-padding-right: var(--card-body-padding-right, 16px);
-	$card-body-padding-top: var(--card-body-padding-top, 16px);
-
-	// `flex` enable `flex-grow: 1` for decks and groups so that card blocks take up
-	// as much space as possible, ensuring footers are aligned to the bottom.
-	// `min-height` workaround for the image size bug in IE
-	// See: https://github.com/twbs/bootstrap/pull/28855
-
-	$card-body: ();
-	$card-body: map-deep-merge(
-		(
-			color: $card-color,
-			flex: 1 1 auto,
-			min-height: 1px,
-			padding-bottom: $card-body-padding-bottom,
-			padding-left: $card-body-padding-left,
-			padding-right: $card-body-padding-right,
-			padding-top: $card-body-padding-top,
-		),
-		$card-body
-	);
-
-	// .card-section-header
-
-	$card-section-header-color: var(--card-section-header-color, $gray-600);
-	$card-section-header-font-size: var(--card-section-header-font-size, 12px);
-	$card-section-header-font-weight: var(
-		--card-section-header-font-weight,
-		$font-weight-semi-bold
-	);
-	$card-section-header-line-height: var(
-		--card-section-header-line-height,
-		2.5
-	);
-	$card-section-header-margin-bottom: var(
-		--card-section-header-margin-bottom,
-		24px
-	);
-	$card-section-header-padding: var(
-		--card-section-header-padding,
-		0 calc(#{$grid-gutter-width} * 0.5)
-	);
-	$card-section-header-text-transform: var(
-		--card-section-header-text-transform,
-		uppercase
-	);
-
-	$card-section-header: ();
-	$card-section-header: map-deep-merge(
-		(
-			color: $card-section-header-color,
-			font-size: $card-section-header-font-size,
-			font-weight: $card-section-header-font-weight,
-			line-height: $card-section-header-line-height,
-			margin-bottom: $card-section-header-margin-bottom,
-			padding: $card-section-header-padding,
-			text-transform: $card-section-header-text-transform,
+$card-bg: var(--card-bg, $white) !default;
+$card-border-color: var(
+	--card-border-color,
+	unquote('hsl(from #{$black} h s l / 0.125)')
+) !default;
+$card-border-style: var(--card-border-style, solid) !default;
+$card-border-width: var(--card-border-width, 0px) !default;
+
+$card-border-radius: var(--card-border-radius, $border-radius) !default;
+$card-inner-border-radius: calc(
+	#{$card-border-radius} - #{$card-border-width}
+) !default;
+
+$card-box-shadow: var(
+	--card-box-shadow,
+	0 1px 3px -1px rgba(0, 0, 0, 0.6)
+) !default;
+$card-color: var(--card-color, inherit) !default;
+$card-height: null !default;
+$card-margin-bottom: var(--card-margin-bottom, 24px) !default;
+
+$card-spacer-x: var(--card-spacer-x, 20px) !default;
+$card-spacer-y: var(--card-spacer-y, 12px) !default;
+
+$card-cap-bg: unquote('hsl(from #{$black} h s l / 0.03)') !default;
+$card-cap-color: null !default;
+
+// .card-body
+
+$card-body-padding-bottom: var(--card-body-padding-bottom, 16px) !default;
+$card-body-padding-left: var(--card-body-padding-left, 16px) !default;
+$card-body-padding-right: var(--card-body-padding-right, 16px) !default;
+$card-body-padding-top: var(--card-body-padding-top, 16px) !default;
+
+// `flex` enable `flex-grow: 1` for decks and groups so that card blocks take up
+// as much space as possible, ensuring footers are aligned to the bottom.
+// `min-height` workaround for the image size bug in IE
+// See: https://github.com/twbs/bootstrap/pull/28855
+
+$card-body: () !default;
+$card-body: map-deep-merge(
+	(
+		color: $card-color,
+		flex: 1 1 auto,
+		min-height: 1px,
+		padding-bottom: $card-body-padding-bottom,
+		padding-left: $card-body-padding-left,
+		padding-right: $card-body-padding-right,
+		padding-top: $card-body-padding-top,
+	),
+	$card-body
+);
+
+// .card-section-header
+
+$card-section-header-color: var(
+	--card-section-header-color,
+	$gray-600
+) !default;
+$card-section-header-font-size: var(
+	--card-section-header-font-size,
+	12px
+) !default;
+$card-section-header-font-weight: var(
+	--card-section-header-font-weight,
+	$font-weight-semi-bold
+) !default;
+$card-section-header-line-height: var(
+	--card-section-header-line-height,
+	2.5
+) !default;
+$card-section-header-margin-bottom: var(
+	--card-section-header-margin-bottom,
+	24px
+) !default;
+$card-section-header-padding: var(
+	--card-section-header-padding,
+	0 calc(#{$grid-gutter-width} * 0.5)
+) !default;
+$card-section-header-text-transform: var(
+	--card-section-header-text-transform,
+	uppercase
+) !default;
+
+$card-section-header: () !default;
+$card-section-header: map-deep-merge(
+	(
+		color: $card-section-header-color,
+		font-size: $card-section-header-font-size,
+		font-weight: $card-section-header-font-weight,
+		line-height: $card-section-header-line-height,
+		margin-bottom: $card-section-header-margin-bottom,
+		padding: $card-section-header-padding,
+		text-transform: $card-section-header-text-transform,
+	),
+	$card-section-header
+);
+
+// .card-img-overlay
+
+$card-img-overlay-padding: var(--card-img-overlay-padding, 20px) !default;
+
+// Card Aspect Ratio
+
+$card-aspect-ratio-label: () !default;
+$card-aspect-ratio-label: map-deep-merge(
+	(
+		display: block,
+		margin-bottom: 8px,
+		margin-left: 0,
+		margin-right: 0,
+		margin-top: 8px,
+	),
+	$card-aspect-ratio-label
+);
+
+$card-aspect-ratio-item-top-left: () !default;
+$card-aspect-ratio-item-top-left: map-deep-merge(
+	(
+		left: 16px,
+		top: 16px,
+	),
+	$card-aspect-ratio-item-top-left
+);
+
+$card-aspect-ratio-item-top-center: () !default;
+$card-aspect-ratio-item-top-center: map-deep-merge(
+	(
+		top: 16px,
+	),
+	$card-aspect-ratio-item-top-center
+);
+
+$card-aspect-ratio-item-top-right: () !default;
+$card-aspect-ratio-item-top-right: map-deep-merge(
+	(
+		right: 16px,
+		top: 16px,
+	),
+	$card-aspect-ratio-item-top-right
+);
+
+$card-aspect-ratio-item-right-middle: () !default;
+$card-aspect-ratio-item-right-middle: map-deep-merge(
+	(
+		right: 16px,
+	),
+	$card-aspect-ratio-item-right-middle
+);
+
+$card-aspect-ratio-item-bottom-right: () !default;
+$card-aspect-ratio-item-bottom-right: map-deep-merge(
+	(
+		bottom: 16px,
+		right: 16px,
+	),
+	$card-aspect-ratio-item-bottom-right
+);
+
+$card-aspect-ratio-item-bottom-center: () !default;
+$card-aspect-ratio-item-bottom-center: map-deep-merge(
+	(
+		bottom: 16px,
+	),
+	$card-aspect-ratio-item-bottom-center
+);
+
+$card-aspect-ratio-item-bottom-left: () !default;
+$card-aspect-ratio-item-bottom-left: map-deep-merge(
+	(
+		bottom: 16px,
+		left: 16px,
+	),
+	$card-aspect-ratio-item-bottom-left
+);
+
+// .card
+
+// `min-width`, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+
+$card: () !default;
+$card: map-deep-merge(
+	(
+		background-color: $card-bg,
+		border-color: $card-border-color,
+		border-radius: clay-enable-rounded($card-border-radius),
+		border-style: $card-border-style,
+		border-width: $card-border-width,
+		box-shadow: clay-enable-shadows($card-box-shadow),
+		display: block,
+		height: $card-height,
+		margin-bottom: $card-margin-bottom,
+		min-width: 0,
+		position: relative,
+		word-wrap: break-word,
+
+		aspect-ratio: (
+			label: $card-aspect-ratio-label,
 		),
-		$card-section-header
-	);
 
-	// .card-img-overlay
+		aspect-ratio-item-top-left: $card-aspect-ratio-item-top-left,
 
-	$card-img-overlay-padding: var(--card-img-overlay-padding, 20px);
+		aspect-ratio-item-top-center: $card-aspect-ratio-item-top-center,
 
-	// Card Aspect Ratio
+		aspect-ratio-item-top-right: $card-aspect-ratio-item-top-right,
 
-	$card-aspect-ratio-label: ();
-	$card-aspect-ratio-label: map-deep-merge(
-		(
-			display: block,
-			margin-bottom: 8px,
-			margin-left: 0,
-			margin-right: 0,
-			margin-top: 8px,
-		),
-		$card-aspect-ratio-label
-	);
+		aspect-ratio-item-right-middle: $card-aspect-ratio-item-right-middle,
 
-	$card-aspect-ratio-item-top-left: ();
-	$card-aspect-ratio-item-top-left: map-deep-merge(
-		(
-			left: 16px,
-			top: 16px,
-		),
-		$card-aspect-ratio-item-top-left
-	);
+		aspect-ratio-item-bottom-right: $card-aspect-ratio-item-bottom-right,
 
-	$card-aspect-ratio-item-top-center: ();
-	$card-aspect-ratio-item-top-center: map-deep-merge(
-		(
-			top: 16px,
-		),
-		$card-aspect-ratio-item-top-center
-	);
+		aspect-ratio-item-bottom-center: $card-aspect-ratio-item-bottom-center,
 
-	$card-aspect-ratio-item-top-right: ();
-	$card-aspect-ratio-item-top-right: map-deep-merge(
-		(
-			right: 16px,
-			top: 16px,
-		),
-		$card-aspect-ratio-item-top-right
-	);
-
-	$card-aspect-ratio-item-right-middle: ();
-	$card-aspect-ratio-item-right-middle: map-deep-merge(
-		(
-			right: 16px,
-		),
-		$card-aspect-ratio-item-right-middle
-	);
+		aspect-ratio-item-bottom-left: $card-aspect-ratio-item-bottom-left,
 
-	$card-aspect-ratio-item-bottom-right: ();
-	$card-aspect-ratio-item-bottom-right: map-deep-merge(
-		(
-			bottom: 16px,
-			right: 16px,
+		hr: (
+			margin-left: 0,
+			margin-right: 0,
 		),
-		$card-aspect-ratio-item-bottom-right
-	);
-
-	$card-aspect-ratio-item-bottom-center: ();
-	$card-aspect-ratio-item-bottom-center: map-deep-merge(
-		(
-			bottom: 16px,
+	),
+	$card
+);
+
+// Card Title
+
+$card-title: () !default;
+$card-title: map-deep-merge(
+	(
+		color: var(--card-title-color, $gray-900),
+		font-size: var(--card-title-font-size, 14px),
+		font-weight: var(--card-title-font-weight, $font-weight-semi-bold),
+		line-height: var(--card-title-line-height, $line-height-base),
+		margin-bottom: var(--card-title-margin-bottom, 0),
+	),
+	$card-title
+);
+
+$card-title-link: () !default;
+$card-title-link: map-deep-merge(
+	(
+		color: map-get($card-title, color),
+		hover: (
+			color: map-get($card-title, color),
 		),
-		$card-aspect-ratio-item-bottom-center
-	);
-
-	$card-aspect-ratio-item-bottom-left: ();
-	$card-aspect-ratio-item-bottom-left: map-deep-merge(
-		(
-			bottom: 16px,
-			left: 16px,
+	),
+	$card-title-link
+);
+
+$card-title: map-deep-merge(
+	$card-title,
+	(
+		href: $card-title-link,
+	)
+);
+
+// Card Subtitle
+
+$card-subtitle: () !default;
+$card-subtitle: map-deep-merge(
+	(
+		color: var(--card-subtitle-color, $gray-600),
+		font-size: var(--card-subtitle-font-size, 14px),
+		font-weight: var(--card-subtitle-font-weight, $font-weight-normal),
+		margin-bottom: var(--card-subtitle-margin-bottom, 0),
+		margin-top: var(--card-subtitle-margin-top, 0),
+	),
+	$card-subtitle
+);
+
+$card-subtitle-link: () !default;
+$card-subtitle-link: map-deep-merge(
+	(
+		color: map-get($card-subtitle, color),
+		hover: (
+			color: $gray-600,
 		),
-		$card-aspect-ratio-item-bottom-left
-	);
-
-	// .card
-
-	// `min-width`, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-
-	$card: ();
-	$card: map-deep-merge(
-		(
-			background-color: $card-bg,
-			border-color: $card-border-color,
-			border-radius: clay-enable-rounded($card-border-radius),
-			border-style: $card-border-style,
-			border-width: $card-border-width,
-			box-shadow: clay-enable-shadows($card-box-shadow),
-			display: block,
-			height: $card-height,
-			margin-bottom: $card-margin-bottom,
-			min-width: 0,
-			position: relative,
-			word-wrap: break-word,
-
-			aspect-ratio: (
-				label: $card-aspect-ratio-label,
-			),
-
-			aspect-ratio-item-top-left: $card-aspect-ratio-item-top-left,
-
-			aspect-ratio-item-top-center: $card-aspect-ratio-item-top-center,
-
-			aspect-ratio-item-top-right: $card-aspect-ratio-item-top-right,
-
-			aspect-ratio-item-right-middle:
-				$card-aspect-ratio-item-right-middle,
-
-			aspect-ratio-item-bottom-right:
-				$card-aspect-ratio-item-bottom-right,
-
-			aspect-ratio-item-bottom-center:
-				$card-aspect-ratio-item-bottom-center,
-
-			aspect-ratio-item-bottom-left: $card-aspect-ratio-item-bottom-left,
-
-			hr: (
-				margin-left: 0,
-				margin-right: 0,
-			),
+	),
+	$card-subtitle-link
+);
+
+$card-subtitle: map-deep-merge(
+	$card-subtitle,
+	(
+		href: $card-subtitle-link,
+	)
+);
+
+// Card Link
+
+$card-link: () !default;
+$card-link: map-deep-merge(
+	(
+		color: var(--card-link-color, $gray-600),
+		font-size: var(--card-link-font-size, 14px),
+		hover: (
+			color: var(--card-link-hover-color, $gray-600),
+			text-decoration: var(--card-link-hover-text-decoration, underline),
 		),
-		$card
-	);
+	),
+	$card-link
+);
 
-	// Card Title
+// .card-text
 
-	$card-title: ();
-	$card-title: map-deep-merge(
-		(
-			color: var(--card-title-color, $gray-900),
-			font-size: var(--card-title-font-size, 14px),
-			font-weight: var(--card-title-font-weight, $font-weight-semi-bold),
-			line-height: var(--card-title-line-height, $line-height-base),
-			margin-bottom: var(--card-title-margin-bottom, 0),
+$card-text: () !default;
+$card-text: map-deep-merge(
+	(
+		last-child: (
+			margin-bottom: 0,
 		),
-		$card-title
-	);
-
-	$card-title-link: ();
-	$card-title-link: map-deep-merge(
-		(
-			color: map-get($card-title, color),
-			hover: (
-				color: map-get($card-title, color),
+	),
+	$card-text
+);
+
+// .card-divider
+
+$card-divider-bg: var(--card-divider-bg, $card-border-color) !default;
+$card-divider-height: var(--card-divider-height, 1px) !default;
+$card-divider-spacer-x: var(--card-divider-spacer-x, null) !default;
+$card-divider-spacer-y: var(--card-divider-spacer-y, 10px) !default;
+
+$card-divider: () !default;
+$card-divider: map-deep-merge(
+	(
+		background-color: $card-divider-bg,
+		height: $card-divider-height,
+		margin-bottom: $card-divider-spacer-y,
+		margin-left: $card-divider-spacer-x,
+		margin-right: $card-divider-spacer-x,
+		margin-top: $card-divider-spacer-y,
+	),
+	$card-divider
+);
+
+// .card-header
+
+// `margin-bottom` removes the default margin-bottom of <hN> (h1 - h6)
+
+$card-header: () !default;
+$card-header: map-deep-merge(
+	(
+		background-color: var(--card-header-background-color, $card-cap-bg),
+		border-bottom:
+			var(
+				--card-header-border-bottom,
+				$card-border-width solid $card-border-color
 			),
+		color: var(--card-header-color, $card-cap-color),
+		margin-bottom: var(--card-header-margin-bottom, 0),
+		padding: var(--card-header-padding, $card-spacer-y $card-spacer-x),
+		first-child: (
+			border-radius:
+				clay-enable-rounded(
+					$card-inner-border-radius $card-inner-border-radius 0 0
+				),
 		),
-		$card-title-link
-	);
-
-	$card-title: map-deep-merge(
-		$card-title,
-		(
-			href: $card-title-link,
-		)
-	);
-
-	// Card Subtitle
-
-	$card-subtitle: ();
-	$card-subtitle: map-deep-merge(
-		(
-			color: var(--card-subtitle-color, $gray-600),
-			font-size: var(--card-subtitle-font-size, 14px),
-			font-weight: var(--card-subtitle-font-weight, $font-weight-normal),
-			margin-bottom: var(--card-subtitle-margin-bottom, 0),
-			margin-top: var(--card-subtitle-margin-top, 0),
+	),
+	$card-header
+);
+
+// .card-footer
+
+$card-footer: () !default;
+$card-footer: map-deep-merge(
+	(
+		background-color: var(--card-footer-background-color, $card-cap-bg),
+		border-top:
+			var(
+				--card-footer-border-top,
+				$card-border-width solid $card-border-color
+			),
+		padding: var(--card-footer-padding, $card-spacer-y $card-spacer-x),
+		last-child: (
+			border-radius:
+				clay-enable-rounded(
+					0 0 $card-inner-border-radius $card-inner-border-radius
+				),
 		),
-		$card-subtitle
-	);
-
-	$card-subtitle-link: ();
-	$card-subtitle-link: map-deep-merge(
-		(
-			color: map-get($card-subtitle, color),
-			hover: (
-				color: $gray-600,
+	),
+	$card-footer
+);
+
+// .rounded-*
+
+$card-rounded-inner-border-radius: calc(
+	#{$rounded-border-radius} - #{$card-border-width}
+) !default;
+$card-rounded-0-inner-border-radius: calc(
+	#{$rounded-0-border-radius} - #{$card-border-width}
+) !default;
+$card-rounded-circle-inner-border-radius: calc(
+	#{$rounded-circle-border-radius} - #{$card-border-width}
+) !default;
+
+$checkbox-left-card-padding: var(--checkbox-left-card-padding, 50px) !default;
+$checkbox-right-card-padding: var(
+	--checkbox-right-card-padding,
+	$checkbox-left-card-padding
+) !default;
+
+$checkbox-position: var(--checkbox-position, 16px) !default;
+
+$form-check-card-checked-box-shadow: var(
+	--form-check-card-checked-box-shadow,
+	0 0 0 2px unquote('hsl(from #{$component-active-bg} h s calc(l + 22.94))')
+) !default;
+
+// .form-check-card
+
+$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-card: () !default;
+$form-check-card: map-deep-merge(
+	(
+		margin-bottom: $card-margin-bottom,
+		margin-top: 0rem,
+		padding-left: 0rem,
+
+		hover: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
 			),
 		),
-		$card-subtitle-link
-	);
-
-	$card-subtitle: map-deep-merge(
-		$card-subtitle,
-		(
-			href: $card-subtitle-link,
-		)
-	);
 
-	// Card Link
-
-	$card-link: ();
-	$card-link: map-deep-merge(
-		(
-			color: var(--card-link-color, $gray-600),
-			font-size: var(--card-link-font-size, 14px),
-			hover: (
-				color: var(--card-link-hover-color, $gray-600),
-				text-decoration:
-					var(--card-link-hover-text-decoration, underline),
+		active: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
 			),
 		),
-		$card-link
-	);
-
-	// .card-text
 
-	$card-text: ();
-	$card-text: map-deep-merge(
-		(
-			last-child: (
-				margin-bottom: 0,
+		checked: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
 			),
 		),
-		$card-text
-	);
-
-	// .card-divider
 
-	$card-divider-bg: var(--card-divider-bg, $card-border-color);
-	$card-divider-height: var(--card-divider-height, 1px);
-	$card-divider-spacer-x: var(--card-divider-spacer-x, null);
-	$card-divider-spacer-y: var(--card-divider-spacer-y, 10px);
-
-	$card-divider: ();
-	$card-divider: map-deep-merge(
-		(
-			background-color: $card-divider-bg,
-			height: $card-divider-height,
-			margin-bottom: $card-divider-spacer-y,
-			margin-left: $card-divider-spacer-x,
-			margin-right: $card-divider-spacer-x,
-			margin-top: $card-divider-spacer-y,
+		card: (
+			margin-bottom: 0rem,
 		),
-		$card-divider
-	);
-
-	// .card-header
 
-	// `margin-bottom` removes the default margin-bottom of <hN> (h1 - h6)
-
-	$card-header: ();
-	$card-header: map-deep-merge(
-		(
-			background-color: var(--card-header-background-color, $card-cap-bg),
-			border-bottom:
-				var(
-					--card-header-border-bottom,
-					$card-border-width solid $card-border-color
-				),
-			color: var(--card-header-color, $card-cap-color),
-			margin-bottom: var(--card-header-margin-bottom, 0),
-			padding: var(--card-header-padding, $card-spacer-y $card-spacer-x),
-			first-child: (
-				border-radius:
-					clay-enable-rounded(
-						$card-inner-border-radius $card-inner-border-radius 0 0
-					),
-			),
+		form-check-input: (
+			margin-left: 0rem,
+			margin-top: 0rem,
+			opacity: 0,
+			position: absolute,
+			z-index: 1,
 		),
-		$card-header
-	);
-
-	// .card-footer
 
-	$card-footer: ();
-	$card-footer: map-deep-merge(
-		(
-			background-color: var(--card-footer-background-color, $card-cap-bg),
-			border-top:
-				var(
-					--card-footer-border-top,
-					$card-border-width solid $card-border-color
-				),
-			padding: var(--card-footer-padding, $card-spacer-y $card-spacer-x),
-			last-child: (
-				border-radius:
-					clay-enable-rounded(
-						0 0 $card-inner-border-radius $card-inner-border-radius
-					),
-			),
-		),
-		$card-footer
-	);
-
-	// .rounded-*
-
-	$card-rounded-inner-border-radius: calc(
-		#{$rounded-border-radius} - #{$card-border-width}
-	);
-	$card-rounded-0-inner-border-radius: calc(
-		#{$rounded-0-border-radius} - #{$card-border-width}
-	);
-	$card-rounded-circle-inner-border-radius: calc(
-		#{$rounded-circle-border-radius} - #{$card-border-width}
-	);
-
-	$checkbox-left-card-padding: var(--checkbox-left-card-padding, 50px);
-	$checkbox-right-card-padding: var(
-		--checkbox-right-card-padding,
-		$checkbox-left-card-padding
-	);
-
-	$checkbox-position: var(--checkbox-position, 16px);
-
-	$form-check-card-checked-box-shadow: var(
-		--form-check-card-checked-box-shadow,
-		0
-			0
-			0
-			2px
-			unquote('hsl(from #{$component-active-bg} h s calc(l + 22.94))')
-	);
-
-	// .form-check-card
-
-	$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow;
-
-	$form-check-card: ();
-	$form-check-card: map-deep-merge(
-		(
-			margin-bottom: $card-margin-bottom,
-			margin-top: 0rem,
+		form-check-label: (
+			color: $body-color,
+			display: inline,
+			font-weight: $font-weight-normal,
 			padding-left: 0rem,
+			position: static,
+		),
 
-			hover: (
-				card: (
-					box-shadow: $form-check-card-checked-box-shadow,
-				),
-			),
-
-			active: (
-				card: (
-					box-shadow: $form-check-card-checked-box-shadow,
-				),
-			),
-
-			checked: (
-				card: (
-					box-shadow: $form-check-card-checked-box-shadow,
-				),
-			),
+		custom-control: (
+			display: inline,
+			margin-right: 0rem,
+			position: static,
 
-			card: (
-				margin-bottom: 0rem,
+			label: (
+				font-weight: $font-weight-normal,
+				padding-left: 0rem,
 			),
 
-			form-check-input: (
-				margin-left: 0rem,
-				margin-top: 0rem,
+			custom-control-label: (
 				opacity: 0,
 				position: absolute,
 				z-index: 1,
 			),
 
-			form-check-label: (
-				color: $body-color,
-				display: inline,
-				font-weight: $font-weight-normal,
-				padding-left: 0rem,
-				position: static,
-			),
-
-			custom-control: (
-				display: inline,
-				margin-right: 0rem,
-				position: static,
+			custom-control-input: (
+				z-index: 2,
 
-				label: (
-					font-weight: $font-weight-normal,
-					padding-left: 0rem,
-				),
-
-				custom-control-label: (
-					opacity: 0,
-					position: absolute,
-					z-index: 1,
-				),
-
-				custom-control-input: (
-					z-index: 2,
-
-					checked: (
-						card: (
-							box-shadow: $form-check-card-checked-box-shadow,
-						),
+				checked: (
+					card: (
+						box-shadow: $form-check-card-checked-box-shadow,
 					),
 				),
 			),
 		),
-		$form-check-card
-	);
+	),
+	$form-check-card
+);
 
-	// .form-check-bottom-left .card-horizontal > .card-body,
-	// .form-check-middle-left .card-horizontal > .card-body,
-	// .form-check-top-left .card-horizontal > .card-body
+// .form-check-bottom-left .card-horizontal > .card-body,
+// .form-check-middle-left .card-horizontal > .card-body,
+// .form-check-top-left .card-horizontal > .card-body
 
-	$checkbox-left-card-padding: 40px;
+$checkbox-left-card-padding: 40px !default;
 
-	// .form-check-bottom-right .card-horizontal > .card-body,
-	// .form-check-middle-right .card-horizontal > .card-body,
-	// .form-check-top-right .card-horizontal > .card-body
+// .form-check-bottom-right .card-horizontal > .card-body,
+// .form-check-middle-right .card-horizontal > .card-body,
+// .form-check-top-right .card-horizontal > .card-body
 
-	$checkbox-right-card-padding: $checkbox-left-card-padding;
+$checkbox-right-card-padding: $checkbox-left-card-padding !default;
 
-	// Form Check Positions
+// Form Check Positions
 
-	$checkbox-position: 1rem;
+$checkbox-position: 1rem !default;
 
-	// .form-check-bottom-left
+// .form-check-bottom-left
 
-	$form-check-bottom-left: ();
-	$form-check-bottom-left: map-deep-merge(
-		(
-			form-check-input: (
+$form-check-bottom-left: () !default;
+$form-check-bottom-left: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: $checkbox-position,
+			opacity: 1,
+			top: auto,
+			transform: none,
+		),
+
+		custom-control: (
+			custom-control-input: (
 				bottom: $checkbox-position,
 				left: $checkbox-position,
-				opacity: 1,
 				top: auto,
 				transform: none,
 			),
 
-			custom-control: (
-				custom-control-input: (
-					bottom: $checkbox-position,
-					left: $checkbox-position,
-					top: auto,
-					transform: none,
-				),
-
-				custom-control-label: (
-					bottom: $checkbox-position,
-					left: $checkbox-position,
-					opacity: 1,
-					top: auto,
-					transform: none,
-				),
+			custom-control-label: (
+				bottom: $checkbox-position,
+				left: $checkbox-position,
+				opacity: 1,
+				top: auto,
+				transform: none,
 			),
 		),
-		$form-check-bottom-left
-	);
+	),
+	$form-check-bottom-left
+);
+
+// .form-check-bottom-right
+
+$form-check-bottom-right: () !default;
+$form-check-bottom-right: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: auto,
+			transform: none,
+		),
 
-	// .form-check-bottom-right
+		custom-control: (
+			custom-control-input: (
+				bottom: $checkbox-position,
+				left: auto,
+				right: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
 
-	$form-check-bottom-right: ();
-	$form-check-bottom-right: map-deep-merge(
-		(
-			form-check-input: (
+			custom-control-label: (
 				bottom: $checkbox-position,
 				left: auto,
 				opacity: 1,
@@ -545,673 +563,650 @@
 				top: auto,
 				transform: none,
 			),
+		),
+	),
+	$form-check-bottom-right
+);
 
-			custom-control: (
-				custom-control-input: (
-					bottom: $checkbox-position,
-					left: auto,
-					right: $checkbox-position,
-					top: auto,
-					transform: none,
-				),
+// .form-check-middle-left
 
-				custom-control-label: (
-					bottom: $checkbox-position,
-					left: auto,
-					opacity: 1,
-					right: $checkbox-position,
-					top: auto,
-					transform: none,
-				),
-			),
+$form-check-middle-left: () !default;
+$form-check-middle-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			margin-top: 0rem,
+			opacity: 1,
+			top: 50%,
+			transform: translateY(-50%),
 		),
-		$form-check-bottom-right
-	);
 
-	// .form-check-middle-left
+		custom-control: (
+			custom-control-input: (
+				left: $checkbox-position,
+				margin-top: 0rem,
+				top: 50%,
+				transform: translateY(-50%),
+			),
 
-	$form-check-middle-left: ();
-	$form-check-middle-left: map-deep-merge(
-		(
-			form-check-input: (
+			custom-control-label: (
 				left: $checkbox-position,
 				margin-top: 0rem,
 				opacity: 1,
 				top: 50%,
 				transform: translateY(-50%),
 			),
+		),
+	),
+	$form-check-middle-left
+);
 
-			custom-control: (
-				custom-control-input: (
-					left: $checkbox-position,
-					margin-top: 0rem,
-					top: 50%,
-					transform: translateY(-50%),
-				),
+// .form-check-middle-right
 
-				custom-control-label: (
-					left: $checkbox-position,
-					margin-top: 0rem,
-					opacity: 1,
-					top: 50%,
-					transform: translateY(-50%),
-				),
-			),
+$form-check-middle-right: () !default;
+$form-check-middle-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			margin-top: 0rem,
+			opacity: 1,
+			right: $checkbox-position,
+			top: 50%,
+			transform: translateY(-50%),
 		),
-		$form-check-middle-left
-	);
 
-	// .form-check-middle-right
-
-	$form-check-middle-right: ();
-	$form-check-middle-right: map-deep-merge(
-		(
-			form-check-input: (
+		custom-control: (
+			custom-control-input: (
 				left: auto,
 				margin-top: 0rem,
-				opacity: 1,
 				right: $checkbox-position,
 				top: 50%,
 				transform: translateY(-50%),
 			),
 
-			custom-control: (
-				custom-control-input: (
-					left: auto,
-					margin-top: 0rem,
-					right: $checkbox-position,
-					top: 50%,
-					transform: translateY(-50%),
-				),
-
-				custom-control-label: (
-					left: auto,
-					margin-top: 0rem,
-					opacity: 1,
-					right: $checkbox-position,
-					top: 50%,
-					transform: translateY(-50%),
-				),
+			custom-control-label: (
+				left: auto,
+				margin-top: 0rem,
+				opacity: 1,
+				right: $checkbox-position,
+				top: 50%,
+				transform: translateY(-50%),
 			),
 		),
-		$form-check-middle-right
-	);
-
-	// .form-check-top-right
+	),
+	$form-check-middle-right
+);
+
+// .form-check-top-right
+
+$form-check-top-right: () !default;
+$form-check-top-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: $checkbox-position,
+			transform: none,
+		),
 
-	$form-check-top-right: ();
-	$form-check-top-right: map-deep-merge(
-		(
-			form-check-input: (
+		custom-control: (
+			custom-control-input: (
 				left: auto,
-				opacity: 1,
 				right: $checkbox-position,
 				top: $checkbox-position,
 				transform: none,
 			),
 
-			custom-control: (
-				custom-control-input: (
-					left: auto,
-					right: $checkbox-position,
-					top: $checkbox-position,
-					transform: none,
-				),
-
-				custom-control-label: (
-					left: auto,
-					opacity: 1,
-					right: $checkbox-position,
-					top: $checkbox-position,
-					transform: none,
-				),
+			custom-control-label: (
+				left: auto,
+				opacity: 1,
+				right: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
 			),
 		),
-		$form-check-top-right
-	);
-
-	// .form-check-top-left
+	),
+	$form-check-top-right
+);
+
+// .form-check-top-left
+
+$form-check-top-left: () !default;
+$form-check-top-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			opacity: 1,
+			top: $checkbox-position,
+			transform: none,
+		),
 
-	$form-check-top-left: ();
-	$form-check-top-left: map-deep-merge(
-		(
-			form-check-input: (
+		custom-control: (
+			custom-control-input: (
 				left: $checkbox-position,
-				opacity: 1,
 				top: $checkbox-position,
 				transform: none,
 			),
 
-			custom-control: (
-				custom-control-input: (
-					left: $checkbox-position,
-					top: $checkbox-position,
-					transform: none,
-				),
-
-				custom-control-label: (
-					left: $checkbox-position,
-					opacity: 1,
-					top: $checkbox-position,
-					transform: none,
-				),
+			custom-control-label: (
+				left: $checkbox-position,
+				opacity: 1,
+				top: $checkbox-position,
+				transform: none,
 			),
 		),
-		$form-check-top-left
-	);
-
-	// Card Interactive
-
-	$card-interactive-after-highlight: ();
-	$card-interactive-after-highlight: map-deep-merge(
-		(
-			border-radius:
-				var(
-					--card-interactive-after-highlight-border-radius,
-					0 0 $card-border-radius $card-border-radius
-				),
-			bottom:
-				var(
-					--card-interactive-after-highlight-bottom,
-					calc(#{$card-border-width} * -1)
-				),
-			content: '',
-			height: var(--card-interactive-after-highlight-height, 0),
-			left:
-				var(
-					--card-interactive-after-highlight-left,
-					calc(#{$card-border-width} * -1)
-				),
-			position:
-				var(--card-interactive-after-highlight-position, absolute),
-			right:
-				var(
-					--card-interactive-after-highlight-right,
-					calc(#{$card-border-width} * -1)
-				),
-			transition:
-				var(
-					--card-interactive-after-highlight-transition,
-					height 0.15s ease-out
-				),
-			hover: (
-				height:
-					var(--card-interactive-after-highlight-hover-height, 4px),
+	),
+	$form-check-top-left
+);
+
+// Card Interactive
+
+$card-interactive-after-highlight: () !default;
+$card-interactive-after-highlight: map-deep-merge(
+	(
+		border-radius:
+			var(
+				--card-interactive-after-highlight-border-radius,
+				0 0 $card-border-radius $card-border-radius
 			),
-
-			focus: (
-				height:
-					var(--card-interactive-after-highlight-focus-height, 4px),
+		bottom:
+			var(
+				--card-interactive-after-highlight-bottom,
+				calc(#{$card-border-width} * -1)
 			),
-
-			active: (
-				height:
-					var(--card-interactive-after-highlight-active-height, 4px),
+		content: '',
+		height: var(--card-interactive-after-highlight-height, 0),
+		left:
+			var(
+				--card-interactive-after-highlight-left,
+				calc(#{$card-border-width} * -1)
+			),
+		position: var(--card-interactive-after-highlight-position, absolute),
+		right:
+			var(
+				--card-interactive-after-highlight-right,
+				calc(#{$card-border-width} * -1)
+			),
+		transition:
+			var(
+				--card-interactive-after-highlight-transition,
+				height 0.15s ease-out
 			),
+		hover: (
+			height: var(--card-interactive-after-highlight-hover-height, 4px),
 		),
-		$card-interactive-after-highlight
-	);
 
-	$card-interactive-card-body: ();
-	$card-interactive-card-body: map-deep-merge(
-		(
-			display: block,
+		focus: (
+			height: var(--card-interactive-after-highlight-focus-height, 4px),
 		),
-		$card-interactive-card-body
-	);
-
-	$card-interactive: ();
-	$card-interactive: map-deep-merge(
-		(
-			cursor: $link-cursor,
-			outline: 0,
-			transition: $component-transition,
-
-			hover: (
-				background-color: #f7f8f9,
-				text-decoration: none,
-			),
 
-			focus: (
-				box-shadow: #{0 0 0 2px #fff,
-				0 0 0 4px #719aff},
-			),
-
-			active: (
-				background-color: #f1f2f5,
-			),
+		active: (
+			height: var(--card-interactive-after-highlight-active-height, 4px),
+		),
+	),
+	$card-interactive-after-highlight
+);
+
+$card-interactive-card-body: () !default;
+$card-interactive-card-body: map-deep-merge(
+	(
+		display: block,
+	),
+	$card-interactive-card-body
+);
+
+$card-interactive: () !default;
+$card-interactive: map-deep-merge(
+	(
+		cursor: $link-cursor,
+		outline: 0,
+		transition: $component-transition,
+
+		hover: (
+			background-color: #f7f8f9,
+			text-decoration: none,
+		),
 
-			after-highlight: $card-interactive-after-highlight,
+		focus: (
+			box-shadow: #{0 0 0 2px #fff,
+			0 0 0 4px #719aff},
+		),
 
-			card-body: $card-interactive-card-body,
+		active: (
+			background-color: #f1f2f5,
 		),
-		$card-interactive
-	);
 
-	// Card Interactive Primary
+		after-highlight: $card-interactive-after-highlight,
 
-	$card-interactive-primary-after-highlight: ();
-	$card-interactive-primary-after-highlight: map-deep-merge(
-		(
-			hover: (
-				background-color: $component-active-bg,
-			),
+		card-body: $card-interactive-card-body,
+	),
+	$card-interactive
+);
 
-			focus: (
-				background-color: $component-active-bg,
-			),
+// Card Interactive Primary
 
-			active: (
-				background-color: $component-active-bg,
-			),
+$card-interactive-primary-after-highlight: () !default;
+$card-interactive-primary-after-highlight: map-deep-merge(
+	(
+		hover: (
+			background-color: $component-active-bg,
 		),
-		$card-interactive-primary-after-highlight
-	);
 
-	$card-interactive-primary: ();
-	$card-interactive-primary: map-deep-merge(
-		(
-			focus: (
-				background-color: $gray-100,
-			),
-
-			active: (
-				background-color: $gray-200,
-			),
+		focus: (
+			background-color: $component-active-bg,
+		),
 
-			after-highlight: $card-interactive-primary-after-highlight,
+		active: (
+			background-color: $component-active-bg,
+		),
+	),
+	$card-interactive-primary-after-highlight
+);
+
+$card-interactive-primary: () !default;
+$card-interactive-primary: map-deep-merge(
+	(
+		focus: (
+			background-color: $gray-100,
 		),
-		$card-interactive-primary
-	);
 
-	// Card Interactive Secondary
+		active: (
+			background-color: $gray-200,
+		),
 
-	$card-interactive-secondary: ();
-	$card-interactive-secondary: map-deep-merge(
-		(
-			color: $gray-900,
+		after-highlight: $card-interactive-primary-after-highlight,
+	),
+	$card-interactive-primary
+);
 
-			hover: (
-				background-color: $white,
-				border-color: transparent,
-				box-shadow: 0 0 0 2px #719aff,
-				color: $gray-900,
-			),
+// Card Interactive Secondary
 
-			focus: (
-				border-color: transparent,
-				box-shadow: 0 0 0 2px #719aff,
-			),
+$card-interactive-secondary: () !default;
+$card-interactive-secondary: map-deep-merge(
+	(
+		color: $gray-900,
 
-			active: (
-				background-color: $white,
-			),
+		hover: (
+			background-color: $white,
+			border-color: transparent,
+			box-shadow: 0 0 0 2px #719aff,
+			color: $gray-900,
 		),
-		$card-interactive-secondary
-	);
 
-	// Card Type Asset
-
-	$card-type-asset: ();
-	$card-type-asset: map-deep-merge(
-		(
-			aspect-ratio: (
-				border-color: $gray-300,
-				border-style: solid,
-				border-width: 0 0 1px 0,
-				horizontal: 16,
-				vertical: 9,
-
-				custom-control: (
-					label: (
-						bottom: 0,
-						cursor: $link-cursor,
-						left: 0,
-						position: absolute,
-						right: 0,
-						top: 0,
-					),
-				),
-			),
+		focus: (
+			border-color: transparent,
+			box-shadow: 0 0 0 2px #719aff,
+		),
 
-			card-type-asset-icon: (
-				width: 22.225%,
+		active: (
+			background-color: $white,
+		),
+	),
+	$card-interactive-secondary
+);
+
+// Card Type Asset
+
+$card-type-asset: () !default;
+$card-type-asset: map-deep-merge(
+	(
+		aspect-ratio: (
+			border-color: $gray-300,
+			border-style: solid,
+			border-width: 0 0 1px 0,
+			horizontal: 16,
+			vertical: 9,
 
-				inline-item: (
+			custom-control: (
+				label: (
 					bottom: 0,
+					cursor: $link-cursor,
 					left: 0,
 					position: absolute,
 					right: 0,
 					top: 0,
 				),
-
-				lexicon-icon: (
-					height: 100%,
-					width: 100%,
-				),
-
-				sticker: (
-					border-radius: 50%,
-					display: block,
-					font-size: 2vw,
-					padding-bottom: 100%,
-					width: 100%,
-				),
 			),
+		),
 
-			card-body: (
-				padding-top: 12px,
-			),
+		card-type-asset-icon: (
+			width: 22.225%,
 
-			card-row: (
-				align-items: flex-start,
+			inline-item: (
+				bottom: 0,
+				left: 0,
+				position: absolute,
+				right: 0,
+				top: 0,
 			),
 
-			dropdown-action: (
-				margin-right: -8px,
-				margin-top: -3px,
+			lexicon-icon: (
+				height: 100%,
+				width: 100%,
 			),
-		),
-		$card-type-asset
-	);
 
-	// Image Card
-
-	$image-card: ();
-	$image-card: map-deep-merge(
-		(
-			aspect-ratio: (
-				checkered-foreground-color: $gray-300,
+			sticker: (
+				border-radius: 50%,
+				display: block,
+				font-size: 2vw,
+				padding-bottom: 100%,
+				width: 100%,
 			),
 		),
-		$image-card
-	);
 
-	// File Card
-
-	$file-card: ();
-	$file-card: map-deep-merge(
-		(
-			card-type-asset-icon: (
-				color: $gray-400,
-			),
+		card-body: (
+			padding-top: 12px,
 		),
-		$file-card
-	);
 
-	// Product Card
-
-	$product-card: ();
-	$product-card: map-deep-merge(
-		(
-			aspect-ratio: (
-				background-color: $white,
-				background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
-			),
-
-			card-body: (
-				text-align: center,
-			),
+		card-row: (
+			align-items: flex-start,
+		),
 
-			card-title: (
-				font-size: 16px,
-			),
+		dropdown-action: (
+			margin-right: -8px,
+			margin-top: -3px,
+		),
+	),
+	$card-type-asset
+);
 
-			card-subtitle: (
-				font-size: 12px,
-			),
+// Image Card
 
-			card-text: (
-				font-size: 18px,
-				font-weight: $font-weight-semi-bold,
-			),
+$image-card: () !default;
+$image-card: map-deep-merge(
+	(
+		aspect-ratio: (
+			checkered-foreground-color: $gray-300,
 		),
-		$product-card
-	);
+	),
+	$image-card
+);
 
-	// User Card
+// File Card
 
-	$user-card: ();
-	$user-card: map-deep-merge(
-		(
-			card-type-asset-icon: (
-				max-width: 80px,
-				min-width: 48px,
-				width: 30%,
-
-				lexicon-icon: (
-					height: auto,
-					width: 50%,
-				),
-			),
+$file-card: () !default;
+$file-card: map-deep-merge(
+	(
+		card-type-asset-icon: (
+			color: $gray-400,
 		),
-		$user-card
-	);
-
-	$card-page: ();
-	$card-page: map-deep-merge(
-		(
-			container-name: c-card-page,
-			container-type: inline-size,
-			extend: '%clay-custom-grid-wrapper',
+	),
+	$file-card
+);
+
+// Product Card
+
+$product-card: () !default;
+$product-card: map-deep-merge(
+	(
+		aspect-ratio: (
+			background-color: $white,
+			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
 		),
-		$card-page
-	);
-
-	// Card Page Item Asset
-
-	$card-page-item-asset: ();
-	$card-page-item-asset: map-deep-merge(
-		(
-			flex-basis: 100%,
-			max-width: 100%,
-			padding-left: calc(#{$grid-gutter-width} * 0.5),
-			padding-right: calc(#{$grid-gutter-width} * 0.5),
-			'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, sm)})':
-			(
-				flex-basis: 50%,
-				max-width: 50%,
-			),
-
-			'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, md)})':
-			(
-				flex-basis: 33.33333%,
-				max-width: 33.33333%,
-			),
-
-			'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, lg)})':
-			(
-				flex-basis: 25%,
-				max-width: 25%,
-			),
 
-			'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, xl)})':
-			(
-				flex-basis: 20%,
-				max-width: 20%,
-			),
+		card-body: (
+			text-align: center,
 		),
-		$card-page-item-asset
-	);
-
-	// Card Page Item User
-
-	// base: min-width 0, sm min-width: 576px, lg: min-width: 992px
 
-	$card-page-item-user: ();
-	$card-page-item-user: map-deep-merge(
-		$card-page-item-asset,
-		$card-page-item-user
-	);
-
-	// Card Type Directory
-
-	$card-type-directory: ();
-	$card-type-directory: map-deep-merge(
-		(
-			sticker: (
-				font-size: 18px,
-			),
+		card-title: (
+			font-size: 16px,
 		),
-		$card-type-directory
-	);
 
-	// Card Page Item Directory
-
-	$card-page-item-directory: ();
-	$card-page-item-directory: map-deep-merge(
-		$card-page-item-asset,
-		$card-page-item-directory
-	);
-
-	// Card Type Template
+		card-subtitle: (
+			font-size: 12px,
+		),
 
-	$card-type-template-after-highlight: ();
-	$card-type-template-after-highlight: map-deep-merge(
-		(
-			bottom: -1px,
-			left: -1px,
-			right: -1px,
+		card-text: (
+			font-size: 18px,
+			font-weight: $font-weight-semi-bold,
 		),
-		$card-type-template-after-highlight
-	);
+	),
+	$product-card
+);
 
-	$card-type-template-aspect-ratio: ();
-	$card-type-template-aspect-ratio: map-deep-merge(
-		(
-			background-image: none,
-			border-width: 0,
-			color: $gray-600,
-			horizontal: 16,
-			text-align: center,
-			vertical: 9,
+// User Card
+
+$user-card: () !default;
+$user-card: map-deep-merge(
+	(
+		card-type-asset-icon: (
+			max-width: 80px,
+			min-width: 48px,
+			width: 30%,
 
 			lexicon-icon: (
 				height: auto,
-				width: 28%,
+				width: 50%,
 			),
 		),
-		$card-type-template-aspect-ratio
-	);
-
-	$card-type-template-aspect-ratio-item: ();
-	$card-type-template-aspect-ratio-item: map-deep-merge(
+	),
+	$user-card
+);
+
+$card-page: () !default;
+$card-page: map-deep-merge(
+	(
+		container-name: c-card-page,
+		container-type: inline-size,
+		extend: '%clay-custom-grid-wrapper',
+	),
+	$card-page
+);
+
+// Card Page Item Asset
+
+$card-page-item-asset: () !default;
+$card-page-item-asset: map-deep-merge(
+	(
+		flex-basis: 100%,
+		max-width: 100%,
+		padding-left: calc(#{$grid-gutter-width} * 0.5),
+		padding-right: calc(#{$grid-gutter-width} * 0.5),
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, sm)})':
 		(
-			color: $gray-600,
-			width: 100.6%,
+			flex-basis: 50%,
+			max-width: 50%,
 		),
-		$card-type-template-aspect-ratio-item
-	);
 
-	$card-type-template-card-title: ();
-	$card-type-template-card-title: map-deep-merge(
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, md)})':
 		(
-			display: block,
-			margin-bottom: 8px,
+			flex-basis: 33.33333%,
+			max-width: 33.33333%,
 		),
-		$card-type-template-card-title
-	);
 
-	$card-type-template-card-text: ();
-	$card-type-template-card-text: map-deep-merge(
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, lg)})':
 		(
-			display: block,
+			flex-basis: 25%,
+			max-width: 25%,
 		),
-		$card-type-template-card-text
-	);
 
-	$card-type-template: ();
-	$card-type-template: map-deep-merge(
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, xl)})':
 		(
-			border-width: 1px,
-			box-shadow: none,
-			color: $gray-900,
-
-			hover: (
-				color: $gray-900,
-			),
-
-			after-highlight: $card-type-template-after-highlight,
-
-			aspect-ratio: $card-type-template-aspect-ratio,
-
-			aspect-ratio-item: $card-type-template-aspect-ratio-item,
-
-			card-title: $card-type-template-card-title,
-
-			card-text: $card-type-template-card-text,
+			flex-basis: 20%,
+			max-width: 20%,
 		),
-		$card-type-template
-	);
+	),
+	$card-page-item-asset
+);
 
-	// Template Card
+// Card Page Item User
 
-	$template-card-body: ();
-	$template-card-body: map-deep-merge(
-		(
-			padding-top: 0,
-			text-align: center,
-		),
-		$template-card-body
-	);
+// base: min-width 0, sm min-width: 576px, lg: min-width: 992px
 
-	$template-card: ();
-	$template-card: map-deep-merge(
-		(
-			card-body: $template-card-body,
-		),
-		$template-card
-	);
+$card-page-item-user: () !default;
+$card-page-item-user: map-deep-merge(
+	$card-page-item-asset,
+	$card-page-item-user
+);
 
-	// Template Card Horizontal
+// Card Type Directory
 
-	$template-card-horizontal-sticker: ();
-	$template-card-horizontal-sticker: map-deep-merge(
-		(
-			font-size: 20px,
+$card-type-directory: () !default;
+$card-type-directory: map-deep-merge(
+	(
+		sticker: (
+			font-size: 18px,
 		),
-		$template-card-horizontal-sticker
-	);
-
-	$template-card-horizontal-card-row: ();
-	$template-card-horizontal-card-row: map-deep-merge(
-		(
-			margin-left: -4px,
-			margin-right: -4px,
-			width: auto,
-
-			autofit-col: (
-				padding-left: 4px,
-				padding-right: 4px,
-			),
+	),
+	$card-type-directory
+);
+
+// Card Page Item Directory
+
+$card-page-item-directory: () !default;
+$card-page-item-directory: map-deep-merge(
+	$card-page-item-asset,
+	$card-page-item-directory
+);
+
+// Card Type Template
+
+$card-type-template-after-highlight: () !default;
+$card-type-template-after-highlight: map-deep-merge(
+	(
+		bottom: -1px,
+		left: -1px,
+		right: -1px,
+	),
+	$card-type-template-after-highlight
+);
+
+$card-type-template-aspect-ratio: () !default;
+$card-type-template-aspect-ratio: map-deep-merge(
+	(
+		background-image: none,
+		border-width: 0,
+		color: $gray-600,
+		horizontal: 16,
+		text-align: center,
+		vertical: 9,
+
+		lexicon-icon: (
+			height: auto,
+			width: 28%,
 		),
-		$template-card-horizontal-card-row
-	);
-
-	$template-card-horizontal-card-title: ();
-	$template-card-horizontal-card-title: map-deep-merge(
-		(
-			color: inherit,
-			margin-bottom: 0,
+	),
+	$card-type-template-aspect-ratio
+);
+
+$card-type-template-aspect-ratio-item: () !default;
+$card-type-template-aspect-ratio-item: map-deep-merge(
+	(
+		color: $gray-600,
+		width: 100.6%,
+	),
+	$card-type-template-aspect-ratio-item
+);
+
+$card-type-template-card-title: () !default;
+$card-type-template-card-title: map-deep-merge(
+	(
+		display: block,
+		margin-bottom: 8px,
+	),
+	$card-type-template-card-title
+);
+
+$card-type-template-card-text: () !default;
+$card-type-template-card-text: map-deep-merge(
+	(
+		display: block,
+	),
+	$card-type-template-card-text
+);
+
+$card-type-template: () !default;
+$card-type-template: map-deep-merge(
+	(
+		border-width: 1px,
+		box-shadow: none,
+		color: $gray-900,
+
+		hover: (
+			color: $gray-900,
 		),
-		$template-card-horizontal-card-title
-	);
 
-	$template-card-horizontal: ();
-	$template-card-horizontal: map-deep-merge(
-		(
+		after-highlight: $card-type-template-after-highlight,
+
+		aspect-ratio: $card-type-template-aspect-ratio,
+
+		aspect-ratio-item: $card-type-template-aspect-ratio-item,
+
+		card-title: $card-type-template-card-title,
+
+		card-text: $card-type-template-card-text,
+	),
+	$card-type-template
+);
+
+// Template Card
+
+$template-card-body: () !default;
+$template-card-body: map-deep-merge(
+	(
+		padding-top: 0,
+		text-align: center,
+	),
+	$template-card-body
+);
+
+$template-card: () !default;
+$template-card: map-deep-merge(
+	(
+		card-body: $template-card-body,
+	),
+	$template-card
+);
+
+// Template Card Horizontal
+
+$template-card-horizontal-sticker: () !default;
+$template-card-horizontal-sticker: map-deep-merge(
+	(
+		font-size: 20px,
+	),
+	$template-card-horizontal-sticker
+);
+
+$template-card-horizontal-card-row: () !default;
+$template-card-horizontal-card-row: map-deep-merge(
+	(
+		margin-left: -4px,
+		margin-right: -4px,
+		width: auto,
+
+		autofit-col: (
+			padding-left: 4px,
+			padding-right: 4px,
+		),
+	),
+	$template-card-horizontal-card-row
+);
+
+$template-card-horizontal-card-title: () !default;
+$template-card-horizontal-card-title: map-deep-merge(
+	(
+		color: inherit,
+		margin-bottom: 0,
+	),
+	$template-card-horizontal-card-title
+);
+
+$template-card-horizontal: () !default;
+$template-card-horizontal: map-deep-merge(
+	(
+		color: $gray-600,
+
+		hover: (
 			color: $gray-600,
+		),
 
-			hover: (
-				color: $gray-600,
-			),
-
-			sticker: $template-card-horizontal-sticker,
+		sticker: $template-card-horizontal-sticker,
 
-			card-row: $template-card-horizontal-card-row,
+		card-row: $template-card-horizontal-card-row,
 
-			card-title: $template-card-horizontal-card-title,
-		),
-		$template-card-horizontal
-	);
-}
+		card-title: $template-card-horizontal-card-title,
+	),
+	$template-card-horizontal
+);