db-ui · mfranzke · Nov 23, 2022 · Nov 22, 2022 · Nov 22, 2022 · Nov 22, 2022
@@ -18,7 +18,6 @@
 		"http://127.0.0.1:8080/patterns/elements-toggle/index.html",
 		"http://127.0.0.1:8080/patterns/components-accordion/index.html",
 		"http://127.0.0.1:8080/patterns/components-breadcrumb/index.html",
-		"http://127.0.0.1:8080/patterns/components-cards/index.html",
 		"http://127.0.0.1:8080/patterns/components-dialog/index.html",
 		"http://127.0.0.1:8080/patterns/components-dropdown/index.html",
 		"http://127.0.0.1:8080/patterns/components-form/index.html",

@@ -15,6 +15,7 @@
 
 	<!-- If you're adapting the HTML out of this document, only include the following CSS file, as the other below are related to pattern lab styling and presenting our patterns in this context even only //-->
 	<link rel="stylesheet" href="../../css/{{ domain }}/db-ui-core.css?{{ cacheBuster }}" media="all">
+	<link rel="stylesheet" href="../../css/{{ domain }}/db-ui-core.classes.css?{{ cacheBuster }}" media="all">
 
 	<!-- Do not include the following CSS, as these are related to pattern lab styling and presenting our patterns in this context even only //-->
 	<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all">

@@ -50,15 +50,12 @@ body {
 
 // Inline
 a {
-	color: $db-colors-secondary-enabled;
+	// TODO: Move to DB UI Base
+	color: inherit;
 
 	strong {
 		color: currentColor;
 	}
-
-	&:hover {
-		color: #5d616a; // TODO: Identify correct color variable
-	}
 }
 
 code {

@@ -0,0 +1,29 @@
+{{#unless list }}
+<div class="cmp-card"{{#if variant}} data-variant="{{ variant }}"{{/if }}>
+{{else}}
+<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
+<li class="cmp-card"{{#if variant}} data-variant="{{ variant }}"{{/if }}>
+{{/unless}}
+	{{#if hyperlink }}<a href="#">{{/if }}
+		{{#if figure }}<figure>
+			{{#if_eq variant "banner" }}
+				<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
+					<use href="../../icons/illustrative/{{ icon }}.svg#icon"></use>
+				</svg>
+			{{else}}
+				{{> elements-image src="../../icons/functional/images/navigation/db_ic_list_20.svg" alt="" role="presentation" }}
+			{{/if_eq }}
+			<figcaption>{{/if }}
+				{{#if headline}}
+					<!-- [html-validate-disable-next heading-level] -->
+					<h3 class="elm-headline">{{ headline }}</h3>
+				{{/if }}
+				{{#if text }}<p>{{{ text }}}</p>{{/if }}
+			{{#if figure }}</figcaption>
+		</figure>{{/if }}
+	{{#if hyperlink }}</a>{{/if }}
+{{#unless list }}
+</div>
+{{else}}
+</li>
+{{/unless }}
@@ -1,22 +1,49 @@
+@use "@db-ui/base/build/scss/init" as *;
 @use "@db-ui/base/build/scss/variables" as *;
+@use "@db-ui/base/build/scss/variables.global" as *;
 @use "@db-ui/base/build/scss/helpers/functions" as *;
-@import "cards.variables";
+@use "@db-ui/base/build/scss/color/color-variants" as *;
 
 .cmp-card {
-	background-color: #fff;
+	@extend %focus-placeholder;
+	@extend %color-variants;
+
+	background-color: var(
+		--db-current-background-color,
+		$db-colors-neutral-bg-0-enabled
+	);
 
 	border-radius: 8px;
-	box-shadow: $box-shadow-01, $box-shadow-02;
+	box-shadow: $db-elevation-4;
+	padding: $db-spacing-fixed-md;
 
 	& > a {
 		text-decoration: none;
 	}
 
+	&[data-variant="w-full"],
+	&[data-variant="width-full"] {
+		width: 100vw;
+		border-radius: 0;
+	}
+
+	&[data-variant="ia"] {
+		&:hover {
+			cursor: pointer;
+			box-shadow: $db-elevation-8;
+		}
+
+		&:active {
+			box-shadow: $db-elevation-2;
+		}
+	}
+
+	// Cards contents are probably deprecated
+	// TODO: probably remove after discussions and/or move to demonstration styles for the homepage
 	figure {
 		margin: $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m
 			$db-spacing-fixed-normal-m $db-spacing-fixed-normal-xs;
 	}
-
 	// Banner variant
 	&[data-variant="banner"] {
 		figure {
@@ -49,7 +76,6 @@
 			}
 		}
 	}
-
 	// Tile variant
 	&[data-variant="tile"] {
 		text-align: center;

@@ -0,0 +1,80 @@
+<p>outer container db-bg-neutral-2</p>
+<div class="cmp-card db-bg-neutral-2">
+	<ul class="cmp-cards">
+		<li class="cmp-card">
+			<strong>db-bg-neutral-2</strong>
+			<br>
+			<a href="#">Test</a>
+		</li>
+		<li class="cmp-card">
+			<strong>db-bg-neutral-2</strong>
+			<br>
+			<a href="#">Test2</a>
+		</li>
+		<li class="cmp-card">
+			<strong>db-bg-neutral-2</strong>
+			<br>
+			<a href="#">Test3</a>
+		</li>
+	</ul>
+</div>
+
+<p>card with nested cards db-bg-information</p>
+<div class="cmp-card">
+	<ul class="cmp-cards">
+		<li class="cmp-card db-bg-information">
+			<strong>db-bg-information</strong>
+			<br>
+			<a href="#">Test</a>
+		</li>
+		<li class="cmp-card db-bg-information">
+			<strong>db-bg-information</strong>
+			<br>
+			<a href="#">Test2</a>
+		</li>
+		<li class="cmp-card db-bg-information">
+			<strong>db-bg-information</strong>
+			<br>
+			<a href="#">Test3</a>
+		</li>
+	</ul>
+</div>
+
+<p>cards with <code>data-color-variant=success-light</code></p>
+<ul class="cmp-cards">
+	<li class="cmp-card" data-color-variant="success-light">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<a href="#">Test</a>
+	</li>
+	<li class="cmp-card" data-color-variant="success-light">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<a href="#">Test2</a>
+	</li>
+	<li class="cmp-card" data-color-variant="success-light">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<a href="#">Test3</a>
+	</li>
+</ul>
+
+<p>cards with <code>data-color-variant=success-light</code> and <code>data-variant="ia"</code></p>
+
+<ul class="cmp-cards">
+	<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<span>Test</span>
+	</li>
+	<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<span>Test2</span>
+	</li>
+	<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
+		<strong>db-bg-success-light</strong>
+		<br>
+		<span>Test3</span>
+	</li>
+</ul>
@@ -1,5 +1,5 @@
 <ul class="cmp-cards">
 	{{#each cards }}
-		{{> components-card variant=../variant }}
+		{{> components-card variant=../variant list=true }}
 	{{/each }}
 </ul>
@@ -0,0 +1,20 @@
+{
+	"cards": [
+		{
+			"headline": "Headline 01",
+			"text": "Lorem ipsum dolores sint."
+		},
+		{
+			"headline": "Headline 02",
+			"text": "Lorem ipsum dolores sint."
+		},
+		{
+			"headline": "Headline 03",
+			"text": "Lorem ipsum dolores sint."
+		},
+		{
+			"headline": "Headline 04",
+			"text": "Lorem ipsum dolores sint."
+		}
+	]
+}
@@ -0,0 +1,25 @@
+{
+	"variant": "ia",
+	"cards": [
+		{
+			"headline": "Interactive 01",
+			"text": "Lorem ipsum dolores sint.",
+			"hyperlink": true
+		},
+		{
+			"headline": "Interactive 02",
+			"text": "Lorem ipsum dolores sint.",
+			"hyperlink": true
+		},
+		{
+			"headline": "Interactive 03",
+			"text": "Lorem ipsum dolores sint.",
+			"hyperlink": true
+		},
+		{
+			"headline": "Interactive 04",
+			"text": "Lorem ipsum dolores sint.",
+			"hyperlink": true
+		}
+	]
+}
@@ -0,0 +1,5 @@
+{
+	"headline": "Test",
+	"text": "Test 123",
+	"variant": "width-full"
+}
@@ -1,2 +1 @@
-@import "cards.variables";
 @import "../card";
@@ -1,3 +1,2 @@
-@import "cards.variables";
 @import "../cards";
 @import "../card";
@@ -28,7 +28,7 @@
 	<section>
 		{{> elements-headline type='2' text='Core principals' }}
 
-		{{> components-cards variant="banner" }}
+		{{> components-cards variant="banner" figure=true }}
 	</section>
 
 	<section>