Add text block component

components/public-page-components.html

@@ -18,5 +18,17 @@
     </div>
   </section>
 
+  <section id="component-text-block">
+    <p class="sg-preview-label">Component: Text Block</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-text-block" data-component="text-block">
+        <p class="sg-body">
+          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
+        </p>
+      </div>
+    </div>
+  </section>
+
 </body>
 </html>

semantic-tokens-components.html

@@ -97,6 +97,16 @@
         <tr><td>layout-content-group-box-margin-block</td><td>calc(var(--spacing-large) * 0.5)</td><td>Oberer und unterer Außenabstand der Wrapper-Component.</td></tr>
       </tbody>
     </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Text Block</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-text-block</td><td>color-transparent</td><td>Transparente Fläche des Textblocks.</td></tr>
+        <tr><td>text-text-block</td><td>color-font-dark</td><td>Standard-Textfarbe des Textblocks.</td></tr>
+        <tr><td>layout-text-block-width</td><td>60vw</td><td>Breite des Textblocks im Viewport.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">

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;