From 94a1ac9b3350cb1fb7371aa1ef411004e1bd8801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 18 Jun 2026 10:04:11 +0200 Subject: [PATCH] Add content basic object card variant --- foundations.html | 2 ++ patterns/object-card.html | 14 ++++++++++++++ semantic-tokens-components.html | 2 ++ styles/01-foundations.css | 4 ++++ styles/22-patterns-object-card.css | 22 ++++++++++++++++++++++ 5 files changed, 44 insertions(+) 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-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). + content-card-margin-top-desktop100pxOberer Außenabstand der Content Card auf Desktop. + content-card-margin-top-mobile1remOberer Außenabstand der Content Card auf Mobile; entspricht spacing-large. object-group-card-min-width450pxMindestbreite der Group Card im Pattern Object Group Card. object-group-card-max-width650pxMaximale Breite der Group Card im Pattern Object Group Card. object-group-card-height700pxFixe 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.

+ +
+
+
Zustimmung zu Geschäftsbedingungen
+
+
+

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-widthdimension-object-group-card-min-widthMindestbreite der Karteninstanzen im Pattern Object Group Card. layout-object-group-card-max-widthdimension-object-group-card-max-widthMaximalbreite der Karteninstanzen im Pattern Object Group Card. layout-object-group-card-heightdimension-object-group-card-heightFixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card. + layout-content-card-margin-top-desktopdimension-content-card-margin-top-desktopOberer Außenabstand der Content Card auf Desktop. + layout-content-card-margin-top-mobiledimension-content-card-margin-top-mobileOberer Außenabstand der Content Card auf Mobile. layout-notifications-text-segment-fixed-height150pxFixe 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); + } +}