diff --git a/src/app/_shared/components/card-text/card-text.component.html b/src/app/_shared/components/card-text/card-text.component.html
new file mode 100644
index 0000000..fe1a2da
--- /dev/null
+++ b/src/app/_shared/components/card-text/card-text.component.html
@@ -0,0 +1 @@
+<p [innerHtml]="html">{{ text() }}</p>
\ No newline at end of file
diff --git a/src/app/_shared/components/card-text/card-text.component.scss b/src/app/_shared/components/card-text/card-text.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/_shared/components/card-text/card-text.component.ts b/src/app/_shared/components/card-text/card-text.component.ts
new file mode 100644
index 0000000..6da1604
--- /dev/null
+++ b/src/app/_shared/components/card-text/card-text.component.ts
@@ -0,0 +1,41 @@
+import { Component, effect, input } from '@angular/core';
+import { marked } from 'marked';
+import { environment } from '../../../../environments/environment';
+
+@Component({
+  selector: 'app-card-text',
+  templateUrl: './card-text.component.html',
+  styleUrls: ['./card-text.component.scss'],
+})
+export class CardTextComponent {
+  public text = input.required<string>();
+
+  public html = '';
+
+  constructor() {
+    const renderer = this.getCustomRenderer();
+    effect(() => {
+      this.html = marked(this.text(), { renderer });
+    });
+  }
+
+  private getCustomRenderer(): marked.Renderer {
+    const renderer = new marked.Renderer();
+
+    // custom inline image formatter
+    renderer.codespan = (text: string) => {
+      if (text.includes(':')) {
+        const [type, subtype] = text.split(':');
+
+        return `<img src="${environment.baseUrl}/symbols/${type}-${subtype}.webp" class="inline-icon" title="${subtype}" />`;
+      }
+
+      return `<pre>${text}</pre>`;
+    };
+
+    // no paragraphs
+    renderer.paragraph = (text: string) => text;
+
+    return renderer;
+  }
+}