diff --git a/core/frontend/src/cards/css/file.css b/core/frontend/src/cards/css/file.css
new file mode 100644
index 0000000000..3fb581a723
--- /dev/null
+++ b/core/frontend/src/cards/css/file.css
@@ -0,0 +1,73 @@
+.kg-file-card {
+    display: flex;
+    width: 100%;
+    min-height: 96px;
+    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
+}
+
+.kg-file-thumbnail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    min-width: 80px;
+    margin: 8px;
+    background: transparent;
+    object-fit: cover;
+    aspect-ratio: 1/1;
+    border-radius: 3px;
+}
+
+.kg-file-thumbnail.placeholder {
+    background: var(--ghost-accent-color);
+}
+
+.kg-file-hide {
+    display: none !important;
+}
+
+.kg-file-details {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    padding: 8px 12px;
+}
+
+.kg-file-thumbnail.placeholder svg {
+    width: 24px;
+    height: 24px;
+    fill: white;
+}
+
+.kg-file-card-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    --seek-before-width: 0%;
+    --volume-before-width: 100%;
+    --buffered-width: 0%;
+}
+
+.kg-file-title {
+    width: 100%;
+    margin: 8px 0 0 0;
+    padding: 8px 12px 0;
+    border: none;
+    font-family: inherit;
+    font-size: 1.1em;
+    font-weight: 700;
+    background: transparent;
+}
+
+.kg-file-caption {
+    width: 100%;
+    margin: 8px 0 0 0;
+    padding: 8px 12px 0;
+    border: none;
+    font-family: inherit;
+    font-size: 1.1em;
+    font-weight: 700;
+    background: transparent;
+}