diff --git a/.eleventy.js b/.eleventy.js
index 673656e..152f256 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -35,7 +35,8 @@ export default async function (eleventyConfig) {
 			name: 'Vorname Nachname',
 			address: 'Straße Nr., PLZ Ort',
 			phone: '+49 (0)101 1337 48',
-			mail: 'name@domain.tld'
+			mail: 'name@domain.tld',
+			domain: 'https://domain.tld'
 		},
 		debugMode: true,
 		legacyMode: false
diff --git a/source/screens/demo/examples/card.liquid b/source/screens/demo/examples/card.liquid
new file mode 100644
index 0000000..dbe560b
--- /dev/null
+++ b/source/screens/demo/examples/card.liquid
@@ -0,0 +1,69 @@
+---
+title: Card
+tags:
+- demoExample
+---
+{% assign pageClass = "html_card" %}
+{% layout 'hippie/simple.liquid' %}
+
+{% block body %}
+<div class="card_bkg">
+	<div id="dither"></div>
+	{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
+	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
+</div>
+<div class="card_box">
+	<main>
+		<p>Titel<br/>und Beschreibung</p>
+		<h1>{% text hippie.placeholders.name %}</h1>
+		<p>
+			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
+			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
+			&middot;
+			{% text hippie.placeholders.address, '', 'decent' %}</p>
+	</main>
+</div>
+{% endblock %}
+
+{% block script %}
+<script>
+	const flag = document.getElementById('flag');
+	let colors = new Array();
+	let iId = undefined;
+	let position = 0;
+
+	for (let i = 1; i <= flag.childElementCount; i++) {
+		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
+	}
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document
+						.getElementById('triangle-' + i)
+						.setAttribute('fill', colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+	document
+		.querySelector('main')
+		.addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
deleted file mode 100644
index e05818d..0000000
--- a/source/screens/demo/examples/card.njk
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Card
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "html_card" %}
-
-{% extends "demo/_default.njk" %}
-{% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-
-	<!-- {{ page.fileSlug }}.page -->
-	<div class="card_bkg">
-		<div id="dither"></div>
-		{{ ph.flag('svg', '', 'flag', '') }}
-		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-	</div>
-	<div class="card_box">
-		<div id="js_content">
-			<p>Titel<br/>und Beschreibung</p>
-			<h1>{{ ph.name() }}</h1>
-			<p>
-				{{ ph.email('card_address') }}<br/>
-				{{ ph.link('decent', 'site.tld') }}
-				&middot;
-				{{ ph.address('decent') }}</p>
-		</div>
-	</div>
-{% endblock %}
-
-{% block script %}
-	<script>
-		const flag = document.getElementById("flag");
-		let colors = new Array();
-		let iId = undefined;
-		let position = 0;
-
-		for (let i = 1; i <= flag.childElementCount; i++) {
-			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
-		}
-
-		// console.log(colors);
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseenter', () => {
-				iId = setInterval(() => {
-					for (let i = 1; i <= colors.length; i++) {
-						position++;
-
-						if (position >= colors.length) {
-							position = 0;
-						}
-
-						document
-							.getElementById("triangle-" + i)
-							.setAttribute("fill", colors[position]);
-					}
-
-					position++;
-
-					if (position >= colors.length) {
-						position = 0;
-					}
-				}, 600);
-			});
-
-		document
-			.getElementById('js_content')
-			.addEventListener('mouseleave', () => {
-				iId && clearInterval(iId);
-			});
-	</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/card/_card_module.scss b/source/style/modules/card/_card_module.scss
index 5244c7f..86ab09c 100644
--- a/source/style/modules/card/_card_module.scss
+++ b/source/style/modules/card/_card_module.scss
@@ -32,7 +32,7 @@
 				// text-align: center;
 			}
 
-			& > div {
+			& > main {
 				position: relative;
 				padding: 64px 64px 24px 64px;
 				border: 1px solid #FFF;
diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid
index 280a48c..6b6b048 100644
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@@ -14,7 +14,7 @@
 		<g>
 			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
 		</g>{% endcomment %}
-		{% if desc != '' %}
+		{% if desc %}
 			<desc>{{ desc }}</desc>
 		{% endif %}
 		<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>