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

Add distributed three-column text layout pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 07:46:59 +02:00
parent 13d0b86221
commit 38e1e0369f
3 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/text-layouts.html
+17
View File
@@ -41,6 +41,23 @@
</div>
</div>
</div>
<p class="sg-preview-label">Pattern: Dreispaltig verteilt</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt">
<div class="sg-text-layout-pattern__preview-surface">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
</p>
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
</p>
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
</p>
</div>
</div>
</div>
</section>
</body>