diff --git a/components/url/README.md b/components/url/README.md
new file mode 100644
index 00000000000..e6f542430b5
--- /dev/null
+++ b/components/url/README.md
@@ -0,0 +1,3 @@
+# URL component
+
+Component to display URLs in a page.
diff --git a/components/url/bem.js b/components/url/bem.js
new file mode 100644
index 00000000000..40f8ec5600d
--- /dev/null
+++ b/components/url/bem.js
@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const defaultArgs = {
+ link: false,
+ url: '',
+};
+
+export const URLTemplate = ({ url = '', link = false }) =>
+ link
+ ? `${url}`
+ : `${url}`;
diff --git a/components/url/bem.scss b/components/url/bem.scss
new file mode 100644
index 00000000000..6eb2af0d87c
--- /dev/null
+++ b/components/url/bem.scss
@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+
+.utrecht-url {
+ font-variant-ligatures: none;
+}
diff --git a/components/url/bem.stories.mdx b/components/url/bem.stories.mdx
new file mode 100644
index 00000000000..cc266ac47d3
--- /dev/null
+++ b/components/url/bem.stories.mdx
@@ -0,0 +1,103 @@
+
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { defaultArgs, URLTemplate } from "./bem";
+import "./bem.scss";
+
+ URLTemplate(args),
+ },
+ percy: { skip: true },
+ status: {
+ type: "WORK IN PROGRESS",
+ },
+ }}
+/>
+
+# URL
+
+
+
+
+
+## URL with mixed left-to-right path
+
+When displaying an URL in HTML, explicitly mark the text directionality as left-to-right using `dir="ltr"`, to prevent trailing non-word characters such as `/` to be misplaced in a right-to-left document. A trailing slash might end up before `http:` when the URL is in right-to-left text such as Arabic. To maintain the correct rendering even in automated translations of a document, specifically mark URLs as `dir="ltr"` even when the document as a whole is already configured as such using ``.
+
+
+
+## URL with mixed left-to-right top-level domain
+
+
+
+## URL with common ligatures in top-level-domain
+
+It can be helpful to avoid rendering characters together as a ligatures, such as displaying `fi` as `fi`. The CSS property [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) can be used to disable ligatures.
+
+
diff --git a/packages/component-library-css/src/bem.scss b/packages/component-library-css/src/bem.scss
index 855a7555cf8..8d04c8894e9 100644
--- a/packages/component-library-css/src/bem.scss
+++ b/packages/component-library-css/src/bem.scss
@@ -72,3 +72,4 @@
@import "../../../components/textarea/bem";
@import "../../../components/textbox/bem";
@import "../../../components/unordered-list/bem";
+@import "../../../components/url/bem";