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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-24 12:11:55 +02:00
parent 7391685617
commit 311ff21a34
9 changed files with 151 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/public-page-patterns.html
+41
View File
@@ -36,6 +36,27 @@
</div>
</div>
<p class="sg-preview-label">pattern: Content Focus Box</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card" data-component="basic-card">
<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">
<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">
<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>
</div>
</div>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: CTA box left</p>
<div class="sg-preview-area">
@@ -76,6 +97,26 @@
</div>
</div>
<p class="sg-preview-label">pattern: CTA small button box right</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">
Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
</p>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Link-Button aktiv
</button>
</div>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: picture full width</p>
<div class="sg-preview-area">