diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index eaa278c..4cef06b 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,7 +1,24 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="CheckEmptyScriptTag" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="x-card" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="SillyAssignmentJS" enabled="true" level="WEAK WARNING" enabled_by_default="true" editorAttributes="INFO_ATTRIBUTES" />
     <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
       <option name="processCode" value="true" />
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..552163e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<html lang="">
+	<head>
+		<meta charset="utf-8" />
+		<title>Obsiview</title>
+		<link rel="stylesheet" href="style/index.css">
+		<script type="module" src="src/index.mjs"></script>
+	</head>
+	<body>
+		<template id="template-card">
+			<style>
+				.card {
+					border-style: solid;
+					border-width: 2px;
+					border-radius: 4px;
+				}
+			</style>
+			<div class="card">
+				<h1>
+					<slot name="card-name">Card name</slot>
+				</h1>
+				<div>
+					<slot name="card-contents">Card contents</slot>
+				</div>
+			</div>
+		</template>
+		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/convezione%20di%20Rayleigh-B%C3%A9nard.md"></x-card>
+		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8 - Sistemi complessi/1 - Sistemi dinamici/condizione iniziale.md"></x-card>
+		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/metastabilit%C3%A0.md"></x-card>
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/card.mjs b/src/card.mjs
new file mode 100644
index 0000000..16efc51
--- /dev/null
+++ b/src/card.mjs
@@ -0,0 +1,58 @@
+import {nameFromFileURL, getVaultFile} from "./fetch.mjs";
+
+
+export class CardElement extends HTMLElement {
+    /**
+     * A reference to the element itself.
+     *
+     * @type {HTMLElement}
+     */
+    self
+
+    constructor() {
+        // noinspection UnnecessaryLocalVariableJS
+        const self = super()
+        this.self = self
+    }
+
+    /**
+     * Get the {@link URL} this card is available at via the `href` attribute.
+     *
+     * @returns {URL} The URL in question.
+     */
+    href() {
+        return new URL(this.self.getAttribute("href"))
+    }
+
+    /**
+     * Get the human-readable name of this card via the `href` attribute.
+     *
+     * @returns {string} The name in question.
+     */
+    name() {
+        return nameFromFileURL(this.href())
+    }
+
+    /**
+     * Get the card's {@link VaultFile} via the `href` attribute.
+     */
+    async file() {
+        // noinspection ES6RedundantAwait
+        return await getVaultFile(this.href())
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const templateElement = document.getElementById("template-card")
+        const instanceElement = templateElement.content.cloneNode(true)
+
+        const nameElement = document.createElement("span")
+        nameElement.setAttribute("slot", "card-name")
+        nameElement.innerText = this.name()
+
+        this.self.appendChild(nameElement)
+
+        const shadow = this.attachShadow({ mode: "open" })
+        shadow.appendChild(instanceElement)
+    }
+}
diff --git a/src/fetch.mjs b/src/fetch.mjs
index f6d9511..51d9e7a 100644
--- a/src/fetch.mjs
+++ b/src/fetch.mjs
@@ -8,10 +8,10 @@ export class UnknownFileKindError extends Error {}
  * Try to determine the {@link VaultFile.kind} from a file's extension.
  *
  * @param extension {string} The file's extension, with no leading colon.
- * @returns {"card"|"canvas"} The successfully determined file type.
+ * @returns {"page"|"canvas"} The successfully determined file type.
  */
 function kindFromExtension(extension) {
-    if(extension === "md") return "card"
+    if(extension === "md") return "page"
     else if(extension === ".canvas") return "canvas"
     throw UnknownFileKindError("No file type matched the given file extension.")
 }
@@ -23,17 +23,10 @@ export class VaultFile {
     /**
      * The type of file.
      *
-     * @type {"card"|"canvas"}
+     * @type {"page"|"canvas"}
      */
     kind
 
-    /**
-     * The name of the file.
-     *
-     * @type {string}
-     */
-    name
-
     /**
      * The contents of the file.
      *
@@ -43,9 +36,8 @@ export class VaultFile {
      */
     contents
 
-    constructor({ kind, name, contents }) {
+    constructor({ kind, contents }) {
         this.kind = kind
-        this.name = name
         this.contents = contents
     }
 }
@@ -65,6 +57,17 @@ export class VaultFetchError extends Error {
     }
 }
 
+
+/**
+ * Get the name of a file from its {@link URL}.
+ *
+ * @param fileURL {URL} The URL to read.
+ * @returns {string} The name of the file.
+ */
+export function nameFromFileURL(fileURL) {
+    return decodeURIComponent(fileURL.pathname.split("/").at(-1).split(".").slice(0, -1).join("."))
+}
+
 /**
  * Fetch a {@link VaultFile} from the given {@link URL}.
  *
@@ -78,9 +81,8 @@ async function fetchVaultFile(fileURL) {
 
     const contents = await response.text()
     const kind = kindFromExtension(fileURL.pathname.split(".").at(-1))
-    const name = decodeURIComponent(fileURL.pathname.split("/").at(-1).split(".").slice(0, -1).join("."))
 
-    return new VaultFile({kind, name, contents})
+    return new VaultFile({kind, contents})
 }
 
 /**
diff --git a/src/index.mjs b/src/index.mjs
index aa87455..7f21024 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,2 +1,5 @@
 import {} from "./config.mjs"
 import {} from "./fetch.mjs"
+import {CardElement} from "./card.mjs"
+
+customElements.define("x-card", CardElement)
