diff --git a/components/public-page-components.html b/components/public-page-components.html index 8270444..98904a7 100644 --- a/components/public-page-components.html +++ b/components/public-page-components.html @@ -18,5 +18,17 @@ +
+

Component: Text Block

+ +
+
+

+ 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 cillu +

+
+
+
+ diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index 772b09a..6e9dcf9 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -97,6 +97,16 @@ layout-content-group-box-margin-blockcalc(var(--spacing-large) * 0.5)Oberer und unterer Außenabstand der Wrapper-Component. + +

Text Block

+ + + + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
surface-text-blockcolor-transparentTransparente Fläche des Textblocks.
text-text-blockcolor-font-darkStandard-Textfarbe des Textblocks.
layout-text-block-width60vwBreite des Textblocks im Viewport.
diff --git a/styles/44-components-public-page-components.css b/styles/44-components-public-page-components.css index 12e42f6..a5e3b6b 100644 --- a/styles/44-components-public-page-components.css +++ b/styles/44-components-public-page-components.css @@ -21,6 +21,20 @@ margin: 0; } +.sg-text-block { + --surface-text-block: var(--color-transparent); + --text-text-block: var(--color-font-dark); + width: 60vw; + box-sizing: border-box; + background: var(--surface-text-block); + color: var(--text-text-block); +} + +.sg-text-block .sg-body { + margin: 0; + color: var(--text-text-block); +} + .sg-page-public-page-components .sg-preview-area { display: flex; flex-direction: column;