diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html index 23977d9..bddca0a 100644 --- a/patterns/vsf-list-detailseite.html +++ b/patterns/vsf-list-detailseite.html @@ -151,6 +151,99 @@ + +
+
+
+
+
Alcon Inc.
+
+ + +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ + +
+
+
+ +
+
Alcon Inc.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+
+
+ +
+
+
+ +
+
Alcon Inc.
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.

+
+ +
+
+
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css index f4304d6..5456bb1 100644 --- a/styles/33-layouts-vsf-list-detailseite.css +++ b/styles/33-layouts-vsf-list-detailseite.css @@ -39,6 +39,7 @@ .sg-vsf-list-detail-page__content { display: flex; + gap: var(--spacing-small); width: 100%; } @@ -47,6 +48,11 @@ min-width: 30%; } +.sg-vsf-list-detail-page__right-column { + width: 70%; + min-width: 0; +} + .sg-vsf-list-detail-page__left-column .sg-group-card { display: flex; flex-direction: column; @@ -58,6 +64,19 @@ width: 100%; } +.sg-vsf-list-detail-page__right-column .sg-object-card-grid { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-vsf-list-detail-page__right-column .sg-object-card-grid .sg-object-card { + flex: 0 0 100%; + width: 100%; + min-width: 0; + max-width: none; +} + @media (max-width: 767px) { .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { width: 100%; @@ -71,4 +90,8 @@ width: 100%; min-width: 0; } + + .sg-vsf-list-detail-page__right-column { + width: 100%; + } }