gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed stacked text layout in content focus box

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-24 12:05:26 +02:00
parent 833544d206
commit 230b82e2f3
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/public-page-patterns.html
+9 -5
View File
@@ -40,13 +40,17 @@
<div class="sg-preview-area"> <div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box"> <div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card" data-component="basic-card"> <p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body"> <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
<p class="sg-body"> <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
Basic Card mit nur einem Segment und hellgrauer Fläche gemäss Token. <p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
</p> </p>
</div> </div>
</article> </div>
</div> </div>
</div> </div>