Add content basic object card variant

foundations.html

@@ -155,6 +155,8 @@
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
+        <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
+        <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>

patterns/object-card.html

@@ -104,6 +104,20 @@
       </article>
     </div>
 
+    <h2 class="sg-sub-heading sg-section-h2">Object Card Content Basic</h2>
+    <p class="sg-preview-label">Pattern: Object Card Content Basic</p>
+    <p class="sg-body">Hinweis: Diese Variante ist für spezifische Inhalte gedacht, die eine Nutzerinteraktion erfordern, zum Beispiel Zustimmungen oder Freigaben. Im Styleguide wird hier nur das Card-Layout gezeigt.</p>
+
+    <article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card-content-basic" data-pattern="object-card-content-basic" aria-label="Objekt Card Content Basic">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-content-basic-header">
+        <div class="sg-strong">Zustimmung zu Geschäftsbedingungen</div>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content-basic-content">
+        <p class="sg-body">Bevor Sie fortfahren, prüfen Sie bitte die Inhalte der Geschäftsbedingungen und bestätigen Sie die Zustimmung im Zielsystem.</p>
+        <p class="sg-body">Die Karte ist bewusst kompakt gehalten und für lesbare, interaktionspflichtige Inhalte auf Desktop mittig ausgerichtet.</p>
+      </div>
+    </article>
+
     <h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
     <p class="sg-preview-label">Pattern: Object Card variable height</p>
     <p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>

semantic-tokens-components.html

@@ -56,6 +56,8 @@
         <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
+        <tr><td>layout-content-card-margin-top-desktop</td><td>dimension-content-card-margin-top-desktop</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
+        <tr><td>layout-content-card-margin-top-mobile</td><td>dimension-content-card-margin-top-mobile</td><td>Oberer Außenabstand der Content Card auf Mobile.</td></tr>
         <tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
       </tbody>
     </table>

styles/01-foundations.css

@@ -172,6 +172,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
+  --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -273,6 +275,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-content-card-margin-top-desktop: 100px;
+  --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;

styles/22-patterns-object-card.css

@@ -70,3 +70,25 @@
 .sg-object-card--variable-height {
   height: auto;
 }
+
+.sg-object-card--content-basic {
+  width: min(70vw, var(--layout-object-card-max-width));
+  margin-inline: auto;
+  height: auto;
+}
+
+.sg-object-card-content-basic {
+  margin-top: var(--layout-content-card-margin-top-desktop);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card--content-basic {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
+  .sg-object-card-content-basic {
+    margin-top: var(--layout-content-card-margin-top-mobile);
+  }
+}