Update cards component labels and add content card example

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>
+</html>

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);
 }