diff --git a/index.html b/index.html
index 44d4b48..7f71435 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
       <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
       <ul class="sg-index-list">
         <li><a href="./patterns/company-card.html">Company Card</a></li>
+        <li><a href="./patterns/vsf-list-card.html">VSF List Card</a></li>
         <li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
new file mode 100644
index 0000000..15d5317
--- /dev/null
+++ b/patterns/vsf-list-card.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Layout VSF List Card</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Layout – VSF List Card</h1>
+
+  <section id="layout-vsf-list-card">
+    <p class="sg-preview-label">Layout: VSF List Card</p>
+    <p class="sg-body">Diese Layout-Seite zeigt VSF-spezifische Statusvarianten der List Card als Grundlage fuer weitere Ausdifferenzierungen.</p>
+
+    <h2 class="sg-sub-heading sg-section-h2">Status: Default</h2>
+    <div class="sg-object-card-grid" aria-label="VSF List Card Status Default">
+      <article class="sg-card sg-object-card" data-pattern="company-card" aria-label="VSF List Card Default">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Alphabet Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
+          <p class="sg-body">Status-Referenz: Default</p>
+        </div>
+      </article>
+    </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Status: Hover</h2>
+    <div class="sg-object-card-grid" aria-label="VSF List Card Status Hover">
+      <article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="hover" aria-label="VSF List Card Hover">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Microsoft Corp.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
+          <p class="sg-body">Status-Referenz: Hover</p>
+        </div>
+      </article>
+    </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Status: Selected</h2>
+    <div class="sg-object-card-grid" aria-label="VSF List Card Status Selected">
+      <article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="selected" aria-label="VSF List Card Selected">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Amazon.com, Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
+          <p class="sg-body">Status-Referenz: Selected</p>
+        </div>
+      </article>
+    </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Status: Disabled</h2>
+    <div class="sg-object-card-grid" aria-label="VSF List Card Status Disabled">
+      <article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="disabled" aria-label="VSF List Card Disabled" aria-disabled="true">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Tesla, Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
+          <p class="sg-body">Status-Referenz: Disabled</p>
+        </div>
+      </article>
+    </div>
+  </section>
+
+</body>
+</html>
