From f30d3ee5cd39e6946cc51464e4d9a3126743cbd1 Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Thu, 19 Dec 2024 14:30:25 -0500
Subject: [PATCH 1/6] Simple components for common HTML usage

---
 .changeset/itchy-donkeys-fail.md              |  5 +++
 .../src/lib/unsorted/ui/Card.stories.svelte   | 24 +++++++++++++
 .../src/lib/unsorted/ui/Card.svelte           | 14 ++++++++
 .../src/lib/unsorted/ui/Embed.stories.svelte  | 17 +++++++++
 .../src/lib/unsorted/ui/Embed.svelte          | 35 +++++++++++++++++++
 .../lib/unsorted/ui/Footnote.stories.svelte   | 35 +++++++++++++++++++
 .../src/lib/unsorted/ui/Footnote.svelte       | 18 ++++++++++
 .../src/lib/unsorted/ui/Image.stories.svelte  | 20 +++++++++++
 .../src/lib/unsorted/ui/Image.svelte          | 30 ++++++++++++++++
 .../src/lib/unsorted/ui/Link.stories.svelte   | 17 +++++++++
 .../src/lib/unsorted/ui/Link.svelte           | 20 +++++++++++
 .../src/lib/unsorted/ui/index.js              |  5 +++
 12 files changed, 240 insertions(+)
 create mode 100644 .changeset/itchy-donkeys-fail.md
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Link.svelte

diff --git a/.changeset/itchy-donkeys-fail.md b/.changeset/itchy-donkeys-fail.md
new file mode 100644
index 0000000000..f3c6895bb7
--- /dev/null
+++ b/.changeset/itchy-donkeys-fail.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add simple wrapper components for common HTML usgae
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
new file mode 100644
index 0000000000..02b2ef5075
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
@@ -0,0 +1,24 @@
+<script context="module">
+	import Card from './Card.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Card',
+		component: Card
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+
+	import BarChart from '../viz/bar/BarChart.svelte';
+</script>
+
+<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
+	{@const data = Query.create(`select * from numeric_series`, query)}
+	<Card>
+		<BarChart {data} {...args} />
+	</Card>
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
new file mode 100644
index 0000000000..3e47d9a943
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
@@ -0,0 +1,14 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let className = '';
+</script>
+
+<div
+	class={`border border-base-400 rounded-md px-3 py-1 shadow-base-200 ${className}`}
+	style="display: inline-block; width: 100%;"
+>
+	<slot />
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte
new file mode 100644
index 0000000000..65feb8e84f
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte
@@ -0,0 +1,17 @@
+<script context="module">
+	import Embed from './Embed.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Embed',
+		component: Embed
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Embed url="https://www.youtube.com/embed/GBWvftt8G80?si=OskePXooCKmRE4nZ" />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
new file mode 100644
index 0000000000..59d2449295
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
@@ -0,0 +1,35 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = ''; // The URL to embed
+	export let title = ''; // A description or title for the embed
+	export let width = '100%'; // Width of the embed, defaults to full width
+	export let height = '400'; // Height of the embed, defaults to 400px
+	export let border = true; // Toggle border visibility
+
+	// Process dimensions: Add `px` if a number, pass through if a valid unit
+	function processDimension(dimension) {
+		return /^\d+$/.test(dimension) ? `${dimension}px` : dimension;
+	}
+
+	$: tailwindWidth = processDimension(width);
+	$: tailwindHeight = processDimension(height);
+</script>
+
+<div
+	class={`embed-wrapper relative overflow-hidden ${
+		border ? 'border border-gray-300 rounded-md shadow-sm' : ''
+	}`}
+	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
+>
+	<iframe
+		src={url}
+		{title}
+		class="absolute inset-0 w-full h-full"
+		loading="lazy"
+		frameborder="0"
+		allowfullscreen
+	></iframe>
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
new file mode 100644
index 0000000000..fc0aaebceb
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
@@ -0,0 +1,35 @@
+<script context="module">
+	import Footnote from './Footnote.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Footnote',
+		component: Footnote
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+
+	import BarChart from '../viz/bar/BarChart.svelte';
+</script>
+
+<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
+	{@const data = Query.create(`select * from numeric_series`, query)}
+	<Footnote id="1">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<Footnote id="2">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<Footnote id="3">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<BarChart {data} {...args} />
+	<Footnote id="1">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<BarChart {data} {...args} />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
new file mode 100644
index 0000000000..4b19368d77
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
@@ -0,0 +1,18 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let id = ''; // Footnote identifier (number or letter)
+</script>
+
+<div class="block">
+	<div class="inline-flex items-baseline text-xs mb-2 mt-0">
+		<!-- Footnote number -->
+		<sup class="text-gray-500">{id}</sup>
+		<!-- Footnote text -->
+		<div class="text-xs ml-1 text-gray-500 leading-tight">
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte
new file mode 100644
index 0000000000..36465aef92
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte
@@ -0,0 +1,20 @@
+<script context="module">
+	import Image from './Image.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Image',
+		component: Image
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Image
+		url="https://images.ctfassets.net/h8q6lxmb5akt/3Zw55bT90zpKWbS26VNOBp/7732c3d8bd6f0994db10c14c8e789057/raptors-logo-original-1995.svg"
+		height="200"
+	/>
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
new file mode 100644
index 0000000000..f66e004f1c
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -0,0 +1,30 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = ''; // URL of the image
+	export let description = ''; // Description for accessibility
+	export let width = ''; // Width of the image
+	export let height = ''; // Height of the image
+
+	// Function to process width/height
+	function processDimension(dimension) {
+		if (!dimension) return ''; // No dimension provided
+		return /^\d+$/.test(dimension) ? `${dimension}px` : dimension; // Add 'px' if it's a number
+	}
+
+	// Processed dimensions
+	$: processedWidth = processDimension(width);
+	$: processedHeight = processDimension(height);
+</script>
+
+<div class="flex flex-col items-center text-center">
+	<img
+		src={url}
+		alt={description}
+		style={`width: ${processedWidth}; height: ${processedHeight};`}
+		class="max-w-full h-auto rounded"
+		loading="lazy"
+	/>
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte
new file mode 100644
index 0000000000..8e5814606c
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte
@@ -0,0 +1,17 @@
+<script context="module">
+	import Link from './Link.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Link',
+		component: Link
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Link url="https://www.youtube.com/watch?v=GBWvftt8G80&t=15s" newTab="true" />
+</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
new file mode 100644
index 0000000000..765286c885
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -0,0 +1,20 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = '#'; // Destination URL
+	export let label = 'Click here'; // Link text
+	export let newTab = false; // Open in a new tab
+	$: newTab = newTab === 'true' || newTab === true;
+	export let className = ''; // Additional classes
+</script>
+
+<a
+	href={url}
+	target={newTab ? '_blank' : '_self'}
+	rel={newTab ? 'noopener noreferrer' : undefined}
+	class={className}
+>
+	{label}
+</a>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/index.js b/packages/ui/core-components/src/lib/unsorted/ui/index.js
index a7aa723ea0..e87f708b66 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/ui/index.js
@@ -1,13 +1,18 @@
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as BigLink } from './BigLink.svelte';
+export { default as Card } from './Card.svelte';
 export { default as ChevronToggle } from './ChevronToggle.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
+export { default as Embed } from './Embed.svelte';
+export { default as Footnote } from './Footnote.svelte';
 export { default as Group } from './Group.svelte';
+export { default as Image } from './Image.svelte';
 export { default as LastRefreshed } from './LastRefreshed.svelte';
 export { default as LineBreak } from './LineBreak.svelte';
+export { default as Link } from './Link.svelte';
 export { default as LoadingIndicator } from './LoadingIndicator.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as PageBreak } from './PageBreak.svelte';

From 356d13024438849dd5adccb8920cf6fc85bb3c97 Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Fri, 20 Dec 2024 08:34:48 -0500
Subject: [PATCH 2/6] add and use utils

---
 .../src/lib/unsorted/ui/Image.svelte              |  8 ++------
 .../src/lib/unsorted/ui/Link.svelte               |  4 +++-
 packages/ui/core-components/src/lib/utils.js      | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
index f66e004f1c..cb5f883bf0 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -3,17 +3,13 @@
 </script>
 
 <script>
+	import { processDimension } from '../../utils.js';
+
 	export let url = ''; // URL of the image
 	export let description = ''; // Description for accessibility
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
 
-	// Function to process width/height
-	function processDimension(dimension) {
-		if (!dimension) return ''; // No dimension provided
-		return /^\d+$/.test(dimension) ? `${dimension}px` : dimension; // Add 'px' if it's a number
-	}
-
 	// Processed dimensions
 	$: processedWidth = processDimension(width);
 	$: processedHeight = processDimension(height);
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
index 765286c885..4d038dcc7a 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -3,10 +3,12 @@
 </script>
 
 <script>
+	import { toBoolean } from '../../utils.js';
+
 	export let url = '#'; // Destination URL
 	export let label = 'Click here'; // Link text
 	export let newTab = false; // Open in a new tab
-	$: newTab = newTab === 'true' || newTab === true;
+	newTab = toBoolean(newTab);
 	export let className = ''; // Additional classes
 </script>
 
diff --git a/packages/ui/core-components/src/lib/utils.js b/packages/ui/core-components/src/lib/utils.js
index ee7c7a6f4c..9b99ffc270 100644
--- a/packages/ui/core-components/src/lib/utils.js
+++ b/packages/ui/core-components/src/lib/utils.js
@@ -81,3 +81,18 @@ export const toBoolean = (value) => {
 	}
 	return Boolean(value);
 };
+
+/**
+ * Processes a dimension value to ensure it is in a valid CSS format.
+ *
+ * If the input is a plain number (e.g., "10"), "px" is appended to it.
+ * If the input is already in a valid format (e.g., "10px", "5em", "auto"), it is returned as-is.
+ * If the input is falsy, an empty string is returned.
+ *
+ * @param {string | number | undefined} dimension - The dimension value to process.
+ * @returns {string} The processed dimension with "px" appended if it's a number, or the original value.
+ */
+export const processDimension = (dimension) => {
+	if (!dimension) return ''; // No dimension provided
+	return /^\d+$/.test(dimension) ? `${dimension}px` : dimension; // Add 'px' if it's a number
+};

From a643f75272b04667cc70950372a4bab1f6edfc75 Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Tue, 31 Dec 2024 12:23:26 -0500
Subject: [PATCH 3/6] remove card and add class props

---
 .../src/lib/unsorted/ui/Card.stories.svelte   | 24 -------------------
 .../src/lib/unsorted/ui/Card.svelte           | 14 -----------
 .../src/lib/unsorted/ui/Embed.svelte          | 14 ++++++++---
 .../src/lib/unsorted/ui/Footnote.svelte       | 18 --------------
 .../src/lib/unsorted/ui/Image.svelte          | 15 ++++++++++--
 .../src/lib/unsorted/ui/Link.svelte           |  4 +++-
 ...ote.stories.svelte => Note.stories.svelte} | 22 ++++++++---------
 .../src/lib/unsorted/ui/Note.svelte           | 14 +++++++++++
 .../src/lib/unsorted/ui/index.js              |  3 +--
 9 files changed, 53 insertions(+), 75 deletions(-)
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
 delete mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
 rename packages/ui/core-components/src/lib/unsorted/ui/{Footnote.stories.svelte => Note.stories.svelte} (81%)
 create mode 100644 packages/ui/core-components/src/lib/unsorted/ui/Note.svelte

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
deleted file mode 100644
index 02b2ef5075..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script context="module">
-	import Card from './Card.svelte';
-
-	/** @type {import("@storybook/svelte").Meta}*/
-	export const meta = {
-		title: 'UI/Card',
-		component: Card
-	};
-</script>
-
-<script>
-	import { Story } from '@storybook/addon-svelte-csf';
-	import { Query } from '@evidence-dev/sdk/usql';
-	import { query } from '@evidence-dev/universal-sql/client-duckdb';
-
-	import BarChart from '../viz/bar/BarChart.svelte';
-</script>
-
-<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
-	{@const data = Query.create(`select * from numeric_series`, query)}
-	<Card>
-		<BarChart {data} {...args} />
-	</Card>
-</Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
deleted file mode 100644
index 3e47d9a943..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Card.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
-<script>
-	export let className = '';
-</script>
-
-<div
-	class={`border border-base-400 rounded-md px-3 py-1 shadow-base-200 ${className}`}
-	style="display: inline-block; width: 100%;"
->
-	<slot />
-</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
index 59d2449295..cfb37f234f 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
@@ -3,6 +3,11 @@
 </script>
 
 <script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+
 	export let url = ''; // The URL to embed
 	export let title = ''; // A description or title for the embed
 	export let width = '100%'; // Width of the embed, defaults to full width
@@ -19,9 +24,12 @@
 </script>
 
 <div
-	class={`embed-wrapper relative overflow-hidden ${
-		border ? 'border border-gray-300 rounded-md shadow-sm' : ''
-	}`}
+	class={cn(
+		`embed-wrapper relative overflow-hidden ${
+			border ? 'border border-gray-300 rounded-md shadow-sm' : ''
+		}`,
+		className
+	)}
 	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
 >
 	<iframe
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
deleted file mode 100644
index 4b19368d77..0000000000
--- a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
-<script>
-	export let id = ''; // Footnote identifier (number or letter)
-</script>
-
-<div class="block">
-	<div class="inline-flex items-baseline text-xs mb-2 mt-0">
-		<!-- Footnote number -->
-		<sup class="text-gray-500">{id}</sup>
-		<!-- Footnote text -->
-		<div class="text-xs ml-1 text-gray-500 leading-tight">
-			<slot />
-		</div>
-	</div>
-</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
index cb5f883bf0..e36b8e5233 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -4,23 +4,34 @@
 
 <script>
 	import { processDimension } from '../../utils.js';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
 
 	export let url = ''; // URL of the image
 	export let description = ''; // Description for accessibility
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
+	export let align = 'center'; // center, left, right
+	const alignMap = {
+		center: 'center',
+		left: 'start',
+		right: 'end'
+	};
+	$: align = alignMap[align] || alignMap['center'];
 
 	// Processed dimensions
 	$: processedWidth = processDimension(width);
 	$: processedHeight = processDimension(height);
 </script>
 
-<div class="flex flex-col items-center text-center">
+<div class="flex flex-col items-{align} text-center">
 	<img
 		src={url}
 		alt={description}
 		style={`width: ${processedWidth}; height: ${processedHeight};`}
-		class="max-w-full h-auto rounded"
+		class={cn('max-w-full h-auto rounded', className)}
 		loading="lazy"
 	/>
 </div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
index 4d038dcc7a..25f4a2f9b3 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -5,11 +5,13 @@
 <script>
 	import { toBoolean } from '../../utils.js';
 
+	let className = undefined;
+	export { className as class };
+
 	export let url = '#'; // Destination URL
 	export let label = 'Click here'; // Link text
 	export let newTab = false; // Open in a new tab
 	newTab = toBoolean(newTab);
-	export let className = ''; // Additional classes
 </script>
 
 <a
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
similarity index 81%
rename from packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
rename to packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
index fc0aaebceb..48512d1f61 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte
@@ -1,10 +1,10 @@
 <script context="module">
-	import Footnote from './Footnote.svelte';
+	import Note from './Note.svelte';
 
 	/** @type {import("@storybook/svelte").Meta}*/
 	export const meta = {
-		title: 'UI/Footnote',
-		component: Footnote
+		title: 'UI/Note',
+		component: Note
 	};
 </script>
 
@@ -18,18 +18,18 @@
 
 <Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
 	{@const data = Query.create(`select * from numeric_series`, query)}
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="2">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
-	<Footnote id="3">
+	</Note>
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
-	<Footnote id="1">
+	<Note>
 		The data for this report was sourced from the World Bank World Development Indicators dataset.
-	</Footnote>
+	</Note>
 	<BarChart {data} {...args} />
 </Story>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
new file mode 100644
index 0000000000..8325bd69b0
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
@@ -0,0 +1,14 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3', className)}>
+	<slot />
+</div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/index.js b/packages/ui/core-components/src/lib/unsorted/ui/index.js
index e87f708b66..046da0db81 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/ui/index.js
@@ -1,13 +1,12 @@
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as BigLink } from './BigLink.svelte';
-export { default as Card } from './Card.svelte';
 export { default as ChevronToggle } from './ChevronToggle.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
 export { default as Embed } from './Embed.svelte';
-export { default as Footnote } from './Footnote.svelte';
+export { default as Note } from './Note.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Image } from './Image.svelte';
 export { default as LastRefreshed } from './LastRefreshed.svelte';

From 718214d5f169df9738ffde0eb6872d3de8a7863e Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Tue, 31 Dec 2024 15:21:49 -0500
Subject: [PATCH 4/6] fixes and add docs

---
 .../src/lib/unsorted/ui/Embed.svelte          |   9 +-
 .../src/lib/unsorted/ui/Image.svelte          |  10 +-
 .../src/lib/unsorted/ui/Link.svelte           |   3 +-
 .../src/lib/unsorted/ui/Note.svelte           |   6 +-
 sites/docs/pages/components/ui/embed/index.md | 114 +++++++++++++++++
 sites/docs/pages/components/ui/image/index.md | 118 ++++++++++++++++++
 sites/docs/pages/components/ui/link/index.md  |  82 ++++++++++++
 sites/docs/pages/components/ui/note/index.md  |  47 +++++++
 8 files changed, 381 insertions(+), 8 deletions(-)
 create mode 100644 sites/docs/pages/components/ui/embed/index.md
 create mode 100644 sites/docs/pages/components/ui/image/index.md
 create mode 100644 sites/docs/pages/components/ui/link/index.md
 create mode 100644 sites/docs/pages/components/ui/note/index.md

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
index cfb37f234f..b05d0f84e2 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
@@ -4,6 +4,7 @@
 
 <script>
 	import { cn } from '$lib/utils.js';
+	import { toBoolean } from '../../utils.js';
 
 	let className = undefined;
 	export { className as class };
@@ -12,7 +13,9 @@
 	export let title = ''; // A description or title for the embed
 	export let width = '100%'; // Width of the embed, defaults to full width
 	export let height = '400'; // Height of the embed, defaults to 400px
+	export let align = 'left'; // center, left, right
 	export let border = true; // Toggle border visibility
+	border = toBoolean(border);
 
 	// Process dimensions: Add `px` if a number, pass through if a valid unit
 	function processDimension(dimension) {
@@ -25,9 +28,9 @@
 
 <div
 	class={cn(
-		`embed-wrapper relative overflow-hidden ${
-			border ? 'border border-gray-300 rounded-md shadow-sm' : ''
-		}`,
+		`embed-wrapper relative overflow-hidden rounded-md ${
+			border ? 'border border-gray-300 shadow-sm' : ''
+		} ${align === 'center' ? 'mx-auto' : align === 'left' ? 'ml-0' : 'mr-0 ml-auto'}`,
 		className
 	)}
 	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
index e36b8e5233..035b24f89f 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import { processDimension } from '../../utils.js';
+	import { processDimension, toBoolean } from '../../utils.js';
 	import { cn } from '$lib/utils.js';
 
 	let className = undefined;
@@ -14,6 +14,9 @@
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
 	export let align = 'center'; // center, left, right
+	export let border = false;
+	border = toBoolean(border);
+
 	const alignMap = {
 		center: 'center',
 		left: 'start',
@@ -31,7 +34,10 @@
 		src={url}
 		alt={description}
 		style={`width: ${processedWidth}; height: ${processedHeight};`}
-		class={cn('max-w-full h-auto rounded', className)}
+		class={cn(
+			`max-w-full h-auto rounded ${border ? 'border border-gray-300 rounded-md shadow-sm' : ''}`,
+			className
+		)}
 		loading="lazy"
 	/>
 </div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
index 25f4a2f9b3..1b61acd9bd 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <script>
+	import { cn } from '$lib/utils.js';
 	import { toBoolean } from '../../utils.js';
 
 	let className = undefined;
@@ -18,7 +19,7 @@
 	href={url}
 	target={newTab ? '_blank' : '_self'}
 	rel={newTab ? 'noopener noreferrer' : undefined}
-	class={className}
+	class={cn('markdown', className)}
 >
 	{label}
 </a>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
index 8325bd69b0..bcccbad239 100644
--- a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
+++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
@@ -9,6 +9,8 @@
 	export { className as class };
 </script>
 
-<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3', className)}>
-	<slot />
+<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3 not-prose', className)}>
+	<span>
+		<slot />
+	</span>
 </div>
diff --git a/sites/docs/pages/components/ui/embed/index.md b/sites/docs/pages/components/ui/embed/index.md
new file mode 100644
index 0000000000..93efc07b3f
--- /dev/null
+++ b/sites/docs/pages/components/ui/embed/index.md
@@ -0,0 +1,114 @@
+---
+title: Embed
+sidebar_position: 1
+---
+
+Use the `Embed` component to display external content, such as videos, maps, or other embeddable media, within your markdown pages. This component allows you to customize dimensions, add borders, and ensure responsive styling. 
+
+## Default usage
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+/>
+```
+</DocTab>
+
+### Custom size
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+        height="200"
+        width=400
+        align=center
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+    width=800
+    height=450
+/>
+```
+</DocTab>
+
+### No border
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+        border=false
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+    border=false
+/>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="url"
+    required={true}
+>
+The URL of the embeddable content.
+</PropListing>
+
+<PropListing 
+    name="title"
+    defaultValue=""
+>
+A description or title for the embed, useful for accessibility purposes.
+</PropListing>
+
+<PropListing 
+    name="width"
+    defaultValue="100%"
+    options="number"
+>
+The width of the embed (in pixels).
+</PropListing>
+
+<PropListing 
+    name="height"
+    defaultValue="400"
+    options="number"
+>
+The height of the embed (in pixels).
+</PropListing>
+
+<PropListing 
+    name="border"
+    defaultValue="true"
+    options={['true', 'false']}
+>
+Whether to display a border around the embed
+</PropListing>
+
+<PropListing 
+    name="class"
+>
+
+Pass custom classes to control the styling of the embed wrapper. Supports [Tailwind classes](https://tailwindcss.com).
+</PropListing>
diff --git a/sites/docs/pages/components/ui/image/index.md b/sites/docs/pages/components/ui/image/index.md
new file mode 100644
index 0000000000..9d0732c905
--- /dev/null
+++ b/sites/docs/pages/components/ui/image/index.md
@@ -0,0 +1,118 @@
+---
+title: Image
+sidebar_position: 1
+---
+
+<Alert status=info>
+
+    Note that you can also use [markdown syntax for images](/reference/markdown/#images). This component is useful when you need to customize the dimensions or styling of the image.
+</Alert>
+
+
+The `Image` component allows you to add responsive and styled images to your markdown pages. This component is useful for embedding images with optional alignment, width, and height settings, and includes accessibility features through the description attribute.
+
+## Examples
+
+### Custom size
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" /> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
+    description="Sample placeholder image"
+    height=80
+/>
+```
+</DocTab>
+
+### Aligned Left
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" align=left/> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
+    description="Sample placeholder image"
+    height=80
+    align="left"
+/>
+```
+</DocTab>
+
+### With Border & Custom Padding
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" border=true class="p-4"/> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" 
+    description="Sample placeholder image"
+    height=80
+    border=true 
+    class="p-4"
+/> 
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="url"
+    required={true}
+>
+The URL of the image.
+</PropListing>
+
+<PropListing 
+    name="description"
+    defaultValue=""
+>
+The description of the image for accessibility purposes.
+</PropListing>
+
+<PropListing 
+    name="width"
+    defaultValue=""
+    options="number"
+>
+The width of the image (in pixels)
+</PropListing>
+
+<PropListing 
+    name="height"
+    defaultValue=""
+    options="number"
+>
+The height of the image (in pixels)
+</PropListing>
+
+<PropListing 
+    name="border"
+    defaultValue="false"
+    options={['true', 'false']}
+>
+Whether to display a border around the image
+</PropListing>
+
+<PropListing 
+    name="align"
+    options={['center', 'left', 'right']}
+    defaultValue="center"
+>
+The alignment of the image
+</PropListing>
+
+<PropListing
+    name="class"
+>
+
+Pass custom classes to control the styling of an accordion item. Supports [tailwind classes](https://tailwindcss.com). 
+
+</PropListing> 
diff --git a/sites/docs/pages/components/ui/link/index.md b/sites/docs/pages/components/ui/link/index.md
new file mode 100644
index 0000000000..bb8b899aaf
--- /dev/null
+++ b/sites/docs/pages/components/ui/link/index.md
@@ -0,0 +1,82 @@
+---
+title: Link
+sidebar_position: 1
+---
+
+<Alert status=info>
+
+    Note that you can also use [markdown syntax for links](/reference/markdown/#links). This component is useful when you need to customize the behavior or styling of the link (e.g., opening in new tab vs. current tab)
+</Alert>
+
+Use the `Link` component to add styled and accessible links to your markdown pages. This component allows you to control the destination URL, link text, and whether it opens in a new tab.
+
+## Default usage
+
+<DocTab>
+<div slot='preview'>
+    <Link 
+        url="https://github.com/evidence-dev/evidence"
+        label="Visit Example"
+    />
+</div>
+
+```markdown
+<Link 
+    url="https://github.com/evidence-dev/evidence"
+    label="Visit Example"
+/>
+```
+</DocTab>
+
+### Open in a new tab
+
+<DocTab>
+<div slot='preview'>
+    <Link 
+        url="https://github.com/evidence-dev/evidence"
+        label="Visit Example"
+        newTab=true
+    />
+</div>
+
+```markdown
+<Link 
+    url="https://github.com/evidence-dev/evidence"
+    label="Visit Example"
+    newTab=true
+/>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="url"
+    required={true}
+    options="string"
+>
+
+The destination URL of the link. It can accept either a full external link (e.g. `https://google.com`) or link to another page within your evidence app (e.g. `/sales/performance`).
+</PropListing>
+
+<PropListing 
+    name="label"
+    defaultValue="Click here"
+>
+The text displayed for the link.
+</PropListing>
+
+<PropListing 
+    name="newTab"
+    defaultValue="false"
+    options={['true', 'false']}
+>
+Whether the link should open in a new tab
+</PropListing>
+
+<PropListing 
+    name="class"
+>
+
+Pass custom classes to style the link. Supports [Tailwind classes](https://tailwindcss.com).
+</PropListing>
diff --git a/sites/docs/pages/components/ui/note/index.md b/sites/docs/pages/components/ui/note/index.md
new file mode 100644
index 0000000000..1359cea76e
--- /dev/null
+++ b/sites/docs/pages/components/ui/note/index.md
@@ -0,0 +1,47 @@
+---
+title: Note
+sidebar_position: 1
+---
+
+Use the `Note` component to display small, styled text for additional context or information
+
+## Default usage
+
+<DocTab>
+<div slot='preview'>
+    <Note>
+        This is a note for additional context.
+    </Note>
+</div>
+
+```markdown
+<Note>
+    This is a note for additional context.
+</Note>
+```
+</DocTab>
+
+### Custom styling
+
+<DocTab>
+<div slot='preview'>
+    <Note class="text-negative">
+        This is a custom-styled note.
+    </Note>
+</div>
+
+```markdown
+<Note class="text-negative">
+    This is a custom-styled note.
+</Note>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="class"
+>
+
+Pass custom classes to style the note. Supports [Tailwind classes](https://tailwindcss.com).
+</PropListing>

From 2d5f89e7985e47edd555f70a3dff46cffa228e0f Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Tue, 31 Dec 2024 15:26:31 -0500
Subject: [PATCH 5/6] add to extension snippets

---
 packages/extension/snippets/emd.code-snippets | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/extension/snippets/emd.code-snippets b/packages/extension/snippets/emd.code-snippets
index 096acb7793..e819f6a6a5 100644
--- a/packages/extension/snippets/emd.code-snippets
+++ b/packages/extension/snippets/emd.code-snippets
@@ -421,5 +421,17 @@
 			"<BaseMap>\n\t<Areas data={${1:query_name}} geoJsonUrl='path/to/geoJson' geoId=geoJsonField areaCol=column_name/>\n\t<Points data={${1:query_name}} lat=lat long=long/>\n</BaseMap>"
 		],
 		"description": "Insert Map"
+	},
+	"Note": {
+		"prefix": "/Note",
+		"body": [
+			"<Note>\n\t${1:Note Content}\n</Note>\n\n"
+		],
+		"description": "Insert Note"
+	},
+	"Embed": {
+		"prefix": "/Embed",
+		"body": ["<Embed url={${1:query_name}}/>\n\n"],
+		"description": "Insert Embed"
 	}
 }

From 5481959a1d8312c1df1780ef6d2851ea75c8904f Mon Sep 17 00:00:00 2001
From: Sean Hughes <sean@evidence.dev>
Date: Tue, 31 Dec 2024 15:29:49 -0500
Subject: [PATCH 6/6] format

---
 packages/extension/snippets/emd.code-snippets | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/extension/snippets/emd.code-snippets b/packages/extension/snippets/emd.code-snippets
index e819f6a6a5..fcac2e571b 100644
--- a/packages/extension/snippets/emd.code-snippets
+++ b/packages/extension/snippets/emd.code-snippets
@@ -424,9 +424,7 @@
 	},
 	"Note": {
 		"prefix": "/Note",
-		"body": [
-			"<Note>\n\t${1:Note Content}\n</Note>\n\n"
-		],
+		"body": ["<Note>\n\t${1:Note Content}\n</Note>\n\n"],
 		"description": "Insert Note"
 	},
 	"Embed": {