@tui/design-system 0.1.1-MR-211.12 → 0.2.0

package/dist/themes/tui/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "@tui/design-system",
-	"version": "0.1.1-MR-211.12",
+	"version": "0.2.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"contributors": [
 		"Matthew Guyader-Squirrell <matthew.squirrell@tui.co.uk>",
 		"Nicky Bliss <nicky.bliss@tui.co.uk>",
-		"Cy Culpin <cy.culpin@tui.co.uk>",
+		"Judith Kirsten <judith.kirsten@tui.com>",
 		"Volodymyr Savchuk <volodymyr.savchuk@tui.com>"
 	],
 	"scripts": {
@@ -56,7 +56,8 @@
 	],
 	"exports": {
 		"./types": "./types/components.ts",
-		"./types/*": "./types/*.ts"
+		"./types/*": "./types/*.ts",
+		"./*": "./*"
 	},
 	"repository": {
 		"type": "git",

package/scss/lib/cards/article/_index.scss

@@ -0,0 +1,3 @@
+// Card article / index
+@use 'mixins' as *;
+@include uilib-card-article;

package/scss/lib/cards/article/_mixins.scss

@@ -0,0 +1,147 @@
+// Card article / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../card/mixins' as *;
+@use '../../image/mixins' as *;
+@use '../../richtext/mixins' as *;
+
+$uilib-card-article-included: false !default;
+
+// Builds card article
+@mixin uilib-card-article() {
+	@if not $uilib-card-article-included {
+		$uilib-card-article-included: true !global;
+
+		@include uilib-card;
+		@include uilib-image;
+		@include uilib-richtext;
+		@include uilib-card-article-master;
+	}
+}
+
+@mixin uilib-card-article-master() {
+	.uilib-card-article {
+		// container for query
+		container-name: uilib-card-article;
+		container-type: inline-size;
+
+		display: flex;
+		flex-flow: row wrap;
+		place-content: flex-start;
+		align-items: stretch;
+
+		margin: var(--uilib-spacing-500) 0;
+
+		border-radius: var(--uilib-card-article-radius);
+
+		&__image {
+			flex: 0 0 auto;
+			align-self: flex-start;
+
+			width: 100%;
+
+			aspect-ratio: var(--uilib-image-wide);
+
+			border-radius: var(--uilib-card-article-radius) var(--uilib-card-article-radius) 0 0;
+		}
+
+		&__heading {
+			margin-bottom: var(--uilib-spacing-200);
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-xlarge-strong);
+			text-wrap: unset;
+
+			button {
+				margin: 0;
+				padding: 0;
+
+				color: inherit;
+				font: inherit;
+
+				border: 0;
+
+				background: none;
+
+				cursor: pointer;
+
+				appearance: none;
+			}
+		}
+
+		.uilib-card__content-container {
+			flex: 1 1 auto;
+
+			width: 100%;
+		}
+
+		&.uilib-card--link {
+			a {
+				text-decoration: none;
+			}
+
+			.uilib-card__content-container {
+				padding-right: calc(var(--uilib-spacing-800) + 2.75rem); // content padding + icon size
+
+				&::before,
+				&::after {
+					position: absolute;
+					bottom: var(--uilib-spacing-400);
+					right: var(--uilib-spacing-400);
+					content: '';
+
+					display: block;
+
+					width: 2.75rem; /* 44px */
+					padding: 0;
+					aspect-ratio: 1/1;
+
+					border-radius: var(--uilib-icon-button-radius);
+
+					background: var(--uilib-icon-button-primary-bg-color);
+
+					@media (prefers-reduced-motion: no-preference) {
+						transition: background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+					}
+				}
+
+				&::after {
+					$offset: calc((var(--uilib-icon-size-medium) - 2.75rem) / 2);
+					width: var(--uilib-icon-size-medium);
+
+					border-radius: 0;
+
+					background: var(--uilib-icon-button-primary-color);
+
+					transform: translate($offset, $offset);
+
+					-webkit-mask: var(--uilib-card-article-link-icon) no-repeat center;
+					mask: var(--uilib-card-article-link-icon) no-repeat center;
+					-webkit-mask-size: cover;
+					mask-size: cover;
+				}
+			}
+
+			&:has(a:hover, button:hover) .uilib-card__content-container::before {
+				background-color: var(--uilib-icon-button-primary-hover-bg-color);
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-article (min-width: 60rem) {
+			&__image {
+				align-self: normal;
+
+				width: calc(50% - var(--uilib-spacing-200));
+
+				aspect-ratio: var(--uilib-image-panoramic);
+
+				border-radius: var(--uilib-card-article-radius) 0 0 var(--uilib-card-article-radius);
+			}
+
+			.uilib-card__content-container {
+				width: calc(50% + var(--uilib-spacing-200));
+			}
+		}
+	}
+}

package/scss/lib/cards/article/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../../variables/env-variables' as *;
+
+$uilib-card-article-variables: (
+	radius: var(--uilib-border-radius-600),
+	link-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/arrow-right.svg'),
+) !default;

package/scss/lib/cards/card/_mixins.scss

@@ -21,6 +21,7 @@ $uilib-card-included: false !default;
 		flex-flow: column;
 
 		width: 100%;
+		margin: var(--uilib-spacing-400) 0;
 
 		border-radius: var(--uilib-card-radius);
 
@@ -28,6 +29,11 @@ $uilib-card-included: false !default;
 
 		box-shadow: var(--uilib-card-default-elevation);
 
+		@media (prefers-reduced-motion: no-preference) {
+			transition: box-shadow var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+		}
+
+		/* stylelint-disable-next-line order/order */
 		&--link {
 			cursor: pointer;
 		}
@@ -49,10 +55,15 @@ $uilib-card-included: false !default;
 			}
 		}
 
-		&--link a::after {
-			position: absolute;
-			inset: 0;
-			content: '';
+		&--link a,
+		&--link button {
+			position: static;
+
+			&::after {
+				position: absolute;
+				inset: 0;
+				content: '';
+			}
 		}
 
 		&__content-container,

package/scss/lib/cards/icon/_index.scss

@@ -0,0 +1,3 @@
+// Card icon / index
+@use 'mixins' as *;
+@include uilib-card-icon;

package/scss/lib/cards/icon/_mixins.scss

@@ -0,0 +1,113 @@
+// Card icon / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../card/mixins' as *;
+
+$uilib-card-icon-included: false !default;
+
+// Builds card icon
+@mixin uilib-card-icon() {
+	@if not $uilib-card-icon-included {
+		$uilib-card-icon-included: true !global;
+
+		@include uilib-card;
+		@include uilib-card-icon-master;
+	}
+}
+
+@mixin uilib-card-icon-master() {
+	.uilib-card-icon {
+		border-radius: var(--uilib-card-icon-small-radius);
+
+		background: transparent;
+
+		box-shadow: none;
+
+		&--large {
+			border-radius: var(--uilib-card-icon-large-radius);
+
+			.uilib-card-icon__content-container {
+				min-height: 10rem; /* 160 / 16 */
+
+				border-radius: var(--uilib-card-icon-large-radius);
+			}
+		}
+
+		&__label {
+			margin-top: var(--uilib-spacing-300);
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-large-strong);
+			text-align: center;
+		}
+
+		&__content-container {
+			display: flex;
+			flex-grow: 1;
+			place-content: center;
+			align-items: center;
+
+			padding: var(--uilib-spacing-600) var(--uilib-spacing-500);
+
+			border-radius: var(--uilib-card-icon-small-radius);
+
+			background: var(--uilib-card-contrast-bg-color);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					box-shadow var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+			}
+		}
+
+		&.uilib-card--link {
+			&:hover {
+				box-shadow: none;
+
+				.uilib-card-icon__content-container {
+					background: var(--uilib-card-default-bg-color);
+
+					box-shadow: var(--uilib-card-hover-elevation);
+				}
+			}
+
+			.uilib-card-icon__label {
+				&::after {
+					content: '';
+
+					display: inline-block;
+
+					width: var(--uilib-icon-size-small);
+
+					vertical-align: middle;
+
+					background: var(--uilib-color-text-strong);
+
+					aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+					-webkit-mask: var(--uilib-card-icon-link-icon) no-repeat center;
+					mask: var(--uilib-card-icon-link-icon) no-repeat center;
+					-webkit-mask-size: cover;
+					mask-size: cover;
+				}
+
+				a,
+				button {
+					margin-right: var(--uilib-spacing-100);
+					padding: 0;
+
+					color: inherit;
+					font: inherit;
+					text-decoration: none;
+
+					border: 0;
+
+					background: none;
+
+					cursor: pointer;
+
+					appearance: none;
+				}
+			}
+		}
+	}
+}

package/scss/lib/cards/icon/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../../variables/env-variables' as *;
+
+$uilib-card-icon-variables: (
+	small-radius: var(--uilib-card-radius),
+	large-radius: var(--uilib-border-radius-600),
+	link-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/cards/search/_mixins.scss

@@ -95,10 +95,6 @@ $uilib-card-search-included: false !default;
 				overflow: hidden;
 			}
 
-			tui-uilib-image {
-				display: contents;
-			}
-
 			.uilib-card-search__image {
 				position: absolute;
 				inset: 0 auto 0 50%;

package/scss/lib/image/_mixins.scss

@@ -13,6 +13,10 @@ $uilib-image-included: false !default;
 }
 
 @mixin uilib-image-master() {
+	tui-uilib-image {
+		display: contents;
+	}
+
 	.uilib-image {
 		display: flex;
 

package/scss/mixins.scss

@@ -5,8 +5,10 @@
 @forward 'lib/alert/mixins';
 @forward 'lib/button/mixins';
 @forward 'lib/cards/card/mixins';
-@forward 'lib/cards/selectable/mixins';
+@forward 'lib/cards/article/mixins';
+@forward 'lib/cards/icon/mixins';
 @forward 'lib/cards/search/mixins';
+@forward 'lib/cards/selectable/mixins';
 @forward 'lib/divider/mixins';
 @forward 'lib/flight-details/mixins';
 @forward 'lib/flyout-dropdown/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -101,6 +101,22 @@ $uilib-crystalski-button-variables: map.merge(
 	)
 );
 
+// Card - article
+$uilib-crystalski-card-article-variables: map.merge(
+	$uilib-card-article-variables,
+	(
+		link-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/arrow-right.svg'),
+	)
+);
+
+// Card - icon
+$uilib-crystalski-card-icon-variables: map.merge(
+	$uilib-card-icon-variables,
+	(
+		link-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
+	)
+);
+
 // Card - selectable
 $uilib-crystalski-card-selectable-variables: map.merge(
 	$uilib-card-selectable-variables,

package/scss/themes/crystalski/index.scss

@@ -74,6 +74,12 @@
 	// Card
 	@include util.uilib-build-css-vars('card', $uilib-card-variables);
 
+	// Card - article
+	@include util.uilib-build-css-vars('card-article', $uilib-crystalski-card-article-variables);
+
+	// Card - icon
+	@include util.uilib-build-css-vars('card-icon', $uilib-crystalski-card-icon-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-crystalski-card-search-variables);
 

package/scss/themes/firstchoice/_overrides.scss

@@ -167,6 +167,25 @@ $uilib-firstchoice-card-variables: map.merge(
 	)
 );
 
+// Card - article
+$uilib-firstchoice-card-article-variables: map.merge(
+	$uilib-card-article-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		link-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/arrow-right.svg'),
+	)
+);
+
+// Card - icon
+$uilib-firstchoice-card-icon-variables: map.merge(
+	$uilib-card-icon-variables,
+	(
+		small-radius: var(--uilib-border-radius-200),
+		large-radius: var(--uilib-border-radius-200),
+		link-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
+	)
+);
+
 // Card - selectable
 $uilib-firstchoice-card-selectable-variables: map.merge(
 	$uilib-card-selectable-variables,

package/scss/themes/firstchoice/index.scss

@@ -74,6 +74,12 @@
 	// Card
 	@include util.uilib-build-css-vars('card', $uilib-firstchoice-card-variables);
 
+	// Card - article
+	@include util.uilib-build-css-vars('card-article', $uilib-firstchoice-card-article-variables);
+
+	// Card - icon
+	@include util.uilib-build-css-vars('card-icon', $uilib-firstchoice-card-icon-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-firstchoice-card-search-variables);
 

package/scss/themes/firstchoice/theme.json

@@ -235,6 +235,23 @@
 			}
 		}
 	},
+	"card-article": {
+		"tokens": {
+			"card-article-radius": {
+				"primitive": "uilib-border-radius-200"
+			}
+		}
+	},
+	"card-icon": {
+		"tokens": {
+			"card-icon-small-radius": {
+				"primitive": "uilib-border-radius-200"
+			},
+			"card-icon-large-radius": {
+				"primitive": "uilib-border-radius-200"
+			}
+		}
+	},
 	"form-row": {
 		"tokens": {
 			"form-row-label-font": {

package/scss/themes/tui/index.scss

@@ -74,6 +74,12 @@
 	// Card
 	@include util.uilib-build-css-vars('card', $uilib-card-variables);
 
+	// Card - article
+	@include util.uilib-build-css-vars('card-article', $uilib-card-article-variables);
+
+	// Card - icon
+	@include util.uilib-build-css-vars('card-icon', $uilib-card-icon-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-tui-card-search-variables);
 

package/scss/variables/base-theme.json

@@ -973,6 +973,7 @@
 			},
 			"card-hover-elevation": {
 				"primitive": "uilib-elevation-200",
+				"displayType": "shadow",
 				"title": "200",
 				"description": "Card hover elevation"
 			},
@@ -990,6 +991,44 @@
 			}
 		}
 	},
+	"card-article": {
+		"tokens": {
+			"card-article-radius": {
+				"primitive": "uilib-border-radius-600",
+				"displayType": "radius",
+				"title": "Article card radius",
+				"description": "Article card radius"
+			},
+			"card-article-link-icon": {
+				"displayType": "icon",
+				"title": "Fake icon button icon for link variant",
+				"description": "Fake icon button icon for link variant",
+				"longValue": true
+			}
+		}
+	},
+	"card-icon": {
+		"tokens": {
+			"card-icon-small-radius": {
+				"primitive": "uilib-card-radius",
+				"displayType": "radius",
+				"title": "Icon card radius (small variant)",
+				"description": "Icon card radius (small variant)"
+			},
+			"card-icon-large-radius": {
+				"primitive": "uilib-border-radius-600",
+				"displayType": "radius",
+				"title": "Icon card radius (large variant)",
+				"description": "Icon card radius (large variant)"
+			},
+			"card-icon-link-icon": {
+				"displayType": "icon",
+				"title": "Icon card link icon",
+				"description": "Icon card link icon",
+				"longValue": true
+			}
+		}
+	},
 	"card-selectable": {
 		"tokens": {
 			"card-selectable-radius": {

package/scss/variables.scss

@@ -23,8 +23,10 @@
 @forward 'lib/alert/variables';
 @forward 'lib/button/variables';
 @forward 'lib/cards/card/variables';
-@forward 'lib/cards/selectable/variables';
+@forward 'lib/cards/article/variables';
+@forward 'lib/cards/icon/variables';
 @forward 'lib/cards/search/variables';
+@forward 'lib/cards/selectable/variables';
 @forward 'lib/divider/variables';
 @forward 'lib/flight-details/variables';
 @forward 'lib/forms/datepicker/variables';