From b8bba8d11805987241a8e82705db1e7af768d714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 08:01:22 +0200
Subject: [PATCH] Use three-column distributed metrics in company card layout

---
 patterns/company-card.html | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/patterns/company-card.html b/patterns/company-card.html
index c4133c4..3e4e742 100644
--- a/patterns/company-card.html
+++ b/patterns/company-card.html
@@ -45,18 +45,17 @@
           </div>
         </div>
         <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
-          <table class="sg-data-table" aria-label="Company Kennzahlen-Spalten" data-component="data-columns">
-            <tbody>
-              <tr>
-                <td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
-                <td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
-              </tr>
-              <tr>
-                <td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
-                <td data-component-part="data-columns-reference-cell"></td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
+            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
+              PE: <span class="sg-data-table__value">28.8</span>
+            </p>
+            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
+              PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
+            </p>
+            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
+              PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
+            </p>
+          </div>
         </div>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
           <p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>