diff --git a/foundations.html b/foundations.html
index 79eb4f1..06e9f46 100644
--- a/foundations.html
+++ b/foundations.html
@@ -155,6 +155,8 @@
| input-field-desktop-width | 400px | Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. |
| input-field-max-width | 600px | Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). |
| object-card-height | 600px | Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). |
+ | content-card-margin-top-desktop | 100px | Oberer Außenabstand der Content Card auf Desktop. |
+ | content-card-margin-top-mobile | 1rem | Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large. |
| object-group-card-min-width | 450px | Mindestbreite der Group Card im Pattern Object Group Card. |
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
diff --git a/patterns/object-card.html b/patterns/object-card.html
index f55ab6a..3162161 100644
--- a/patterns/object-card.html
+++ b/patterns/object-card.html
@@ -104,6 +104,20 @@
+ Object Card Content Basic
+ Pattern: Object Card Content Basic
+ 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.
+
+
+
+
+
Bevor Sie fortfahren, prüfen Sie bitte die Inhalte der Geschäftsbedingungen und bestätigen Sie die Zustimmung im Zielsystem.
+
Die Karte ist bewusst kompakt gehalten und für lesbare, interaktionspflichtige Inhalte auf Desktop mittig ausgerichtet.
+
+
+
Object Card variable height
Pattern: Object Card variable height
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.
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index c01f5a7..b7b5ff5 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -56,6 +56,8 @@
| layout-object-group-card-min-width | dimension-object-group-card-min-width | Mindestbreite der Karteninstanzen im Pattern Object Group Card. |
| layout-object-group-card-max-width | dimension-object-group-card-max-width | Maximalbreite der Karteninstanzen im Pattern Object Group Card. |
| layout-object-group-card-height | dimension-object-group-card-height | Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card. |
+ | layout-content-card-margin-top-desktop | dimension-content-card-margin-top-desktop | Oberer Außenabstand der Content Card auf Desktop. |
+ | layout-content-card-margin-top-mobile | dimension-content-card-margin-top-mobile | Oberer Außenabstand der Content Card auf Mobile. |
| layout-notifications-text-segment-fixed-height | 150px | Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt. |
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 279379e..e02db44 100644
--- a/styles/01-foundations.css
+++ b/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;
diff --git a/styles/22-patterns-object-card.css b/styles/22-patterns-object-card.css
index d426cb7..0cde2e0 100644
--- a/styles/22-patterns-object-card.css
+++ b/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);
+ }
+}