From fd738423b272423ed1a6b256ff7149d8a146ea5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Sun, 6 Sep 2026 15:30:02 +0200 Subject: [PATCH] Add standalone scrollable card pattern --- foundations.html | 2 + index.html | 1 + patterns/scrollable-card.html | 52 ++++++++++++++++++++++++++ semantic-tokens-patterns.html | 6 +++ styleguide.css | 1 + styles/01-foundations.css | 4 ++ styles/46-patterns-scrollable-card.css | 34 +++++++++++++++++ 7 files changed, 100 insertions(+) create mode 100644 patterns/scrollable-card.html create mode 100644 styles/46-patterns-scrollable-card.css diff --git a/foundations.html b/foundations.html index b13ab10..d290209 100644 --- a/foundations.html +++ b/foundations.html @@ -157,6 +157,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). + scrollable-card-width600pxStandardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. + scrollable-card-height600pxStandardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden. 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. diff --git a/index.html b/index.html index 52395f7..a024328 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@
  • Portal Header
  • Options Row
  • Object Card
    • +
  • Scrollable Card
  • Object Group Card
  • Navigation Card
  • Left Navigation
    • diff --git a/patterns/scrollable-card.html b/patterns/scrollable-card.html new file mode 100644 index 0000000..088bd36 --- /dev/null +++ b/patterns/scrollable-card.html @@ -0,0 +1,52 @@ + + + + + + Styleguide – Pattern Scrollable Card + + + + +

    Pattern – Scrollable Card

    + +
    +

    Pattern: Scrollable Card

    +

    Die Scrollable Card besitzt eine fixe Breite und Höhe. Header und Aktionsbereich bleiben sichtbar; ausschließlich der Inhaltsbereich ist scrollbar. Das Pattern ist unabhängig von Overlay-Patterns und kann bei Bedarf von diesen verwendet werden.

    + +
    +
    +
    Scrollable Card
    +
    + +
    +

    Der Karteninhalt bleibt innerhalb der definierten Kartenhöhe. Bei längeren Inhalten entsteht hier ein eigener vertikaler Scrollbereich, während Titel und Aktionen sichtbar bleiben.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue.

    +

    Donec sed lorem in urna sagittis aliquet. Suspendisse potenti. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

    +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

    +

    Zusätzlicher Inhalt zur Demonstration des unabhängigen Scrollbereichs innerhalb der Card.

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

    +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

    +

    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    +

    Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Vestibulum ligula porta felis euismod semper.

    +

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.

    +

    Morbi risus porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.

    +

    Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.

    +

    Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

    +

    Der untere Aktionsbereich bleibt auch am Ende des Scrollvorgangs an seiner Position sichtbar.

    +
    + +
    +
    + + +
    +
    +
    +
    + + + diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 56e8f80..249e034 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -63,6 +63,12 @@ surface-object-card-lower-segmentcolor-whiteHintergrundfläche der unteren zwei Segmente der Object Card. +

    Scrollable Card

    + + + +
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    layout-scrollable-card-widthdimension-scrollable-card-widthFixe Breite der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.
    layout-scrollable-card-heightdimension-scrollable-card-heightFixe Höhe der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.
    +

    Object Group Card

    diff --git a/styleguide.css b/styleguide.css index 8948424..61459dc 100644 --- a/styleguide.css +++ b/styleguide.css @@ -26,3 +26,4 @@ @import "./styles/43-components-typography.css"; @import "./styles/44-components-public-page-components.css"; @import "./styles/45-patterns-public-page-patterns.css"; +@import "./styles/46-patterns-scrollable-card.css"; diff --git a/styles/01-foundations.css b/styles/01-foundations.css index a17a3b9..2afe7cd 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -174,6 +174,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-scrollable-card-width: var(--dimension-scrollable-card-width); + --layout-scrollable-card-height: var(--dimension-scrollable-card-height); --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); --layout-notification-card-width: var(--dimension-notification-card-width); @@ -286,6 +288,8 @@ --dimension-object-card-mobile-width: 100%; --dimension-object-card-mobile-height: auto; --dimension-object-card-desktop-breakpoint: 768px; + --dimension-scrollable-card-width: 600px; + --dimension-scrollable-card-height: 600px; --dimension-content-card-margin-top-desktop: 100px; --dimension-content-card-margin-top-mobile: 1rem; --dimension-object-group-card-min-width: 450px; diff --git a/styles/46-patterns-scrollable-card.css b/styles/46-patterns-scrollable-card.css new file mode 100644 index 0000000..6049c14 --- /dev/null +++ b/styles/46-patterns-scrollable-card.css @@ -0,0 +1,34 @@ +/* ========================================================= */ +/* Patterns: Scrollable Card */ +/* ========================================================= */ + +.sg-scrollable-card { + display: flex; + flex-direction: column; + width: var(--layout-scrollable-card-width); + max-width: 100%; + height: var(--layout-scrollable-card-height); + box-sizing: border-box; +} + +.sg-scrollable-card__header, +.sg-scrollable-card__actions-segment { + flex: 0 0 auto; +} + +.sg-scrollable-card__content { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; +} + +.sg-scrollable-card__actions { + display: flex; + gap: var(--spacing-small); + width: 100%; +} + +.sg-scrollable-card__actions > .sg-button { + flex: 1 1 0; + min-width: 0; +}
    Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
    layout-object-group-card-min-widthdimension-object-group-card-min-widthMindestbreite der einzelnen Karten im Pattern Object Group Card.