diff --git a/components/cards.html b/components/cards.html
index bf1f8fb..f56983c 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -18,15 +18,15 @@
   <!-- Components                                                -->
   <!-- ========================================================= -->
 
-  <!-- Component: Card -->
+  <!-- Component: Objekt Cards -->
   <section id="component-card">
-    <p class="sg-preview-label">Component: Card</p>
+    <p class="sg-preview-label">Component: Objekt Cards</p>
 
     <div class="sg-preview-area">
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Card Header</div>
+          <div class="sg-strong">Objekt Card 1</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -38,7 +38,7 @@
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
-          <div class="sg-strong">Alternative Header</div>
+          <div class="sg-strong">Objekt Card 2</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -50,7 +50,7 @@
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown" data-component-part="card-header">
-          <div class="sg-strong">Darkbrown Header</div>
+          <div class="sg-strong">Objekt Card 3</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -63,6 +63,27 @@
     </div>
   </section>
 
+  <!-- Component: Content Card -->
+  <section id="component-content-card">
+    <p class="sg-preview-label">Component: Content Card</p>
+
+    <div class="sg-preview-area">
+
+      <article class="sg-card sg-card--content-card" data-component="content-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Content Card</div>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue. Donec sed lorem in urna sagittis.
+          </p>
+        </div>
+      </article>
+
+    </div>
+  </section>
+
   <!-- Component: Group Card -->
   <section id="component-group-card">
     <p class="sg-preview-label">Component: Group Card</p>
@@ -112,4 +133,4 @@
   </section>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styleguide.css b/styleguide.css
index 3d21663..4acae9c 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1894,6 +1894,13 @@ section + section {
   background: var(--surface-card-header-muted);
 }
 
+.sg-card--content-card {
+  --surface-card-header-primary: var(--surface-content-block-card-title);
+  --surface-card-body: var(--surface-content-block-card-content);
+  --text-card-header: var(--text-content-block-card-title);
+  --text-card-body: var(--text-content-block-card-content);
+}
+
 .sg-card-segment + .sg-card-segment {
   box-shadow: inset 0 1px 0 var(--divider-card-segment);
 }