diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index 8e5b0e2..8223008 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -32,6 +32,7 @@ signal-green#009101Positive Score-Balken und positive Chart-Werte. signal-green-light#65A665Hellgrüne Variante für positive Signal- und Notification-Flächen. signal-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen. + ampel-hellgelb#D3B962Untersegmente in der Pattern-Notification-Variante der Object Card. signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte. font-dark#414959Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung. font-light#FFFFFFSchrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons. @@ -158,6 +159,7 @@ 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. + notification-card-width50%Breite der Notification Card relativ zum übergeordneten Layout. public-content-width100%Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite. 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. diff --git a/docs/styleguide/patterns/object-card.html b/docs/styleguide/patterns/object-card.html index 3162161..81ab36d 100644 --- a/docs/styleguide/patterns/object-card.html +++ b/docs/styleguide/patterns/object-card.html @@ -159,6 +159,24 @@ + +

Notification

+

Pattern: Notification

+

Hinweis: Diese Variante basiert auf Object Card Content Basic, ist auf 50% Breite ausgelegt und nutzt hellgelbe Untersegmente.

+ +
+
+
Benachrichtigung
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Donec vitae sapien ut libero venenatis faucibus.

+
+ +