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

Make public content width layout-relative

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-24 10:23:26 +02:00
parent 547fe0cc1f
commit 39ed6474aa
5 changed files with 88 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/public-page-patterns.html
+50 -48
View File
@@ -10,71 +10,73 @@
<h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
<section id="public-page-patterns">
<p class="sg-preview-label">pattern: Public Page Content left</p>
<div class="sg-page-layout-public__content-mirror">
<section id="public-page-patterns">
<p class="sg-preview-label">pattern: Public Page Content left</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
</div>
<p class="sg-preview-label">pattern: Public Page Content right</p>
<p class="sg-preview-label">pattern: Public Page Content right</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block sg-text-block--align-right" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block sg-text-block--align-right" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
</div>
<p class="sg-preview-label">pattern: CTA box left</p>
<p class="sg-preview-label">pattern: CTA box left</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" 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-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" 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--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</div>
</div>
</article>
</article>
</div>
</div>
</div>
<p class="sg-preview-label">pattern: CTA box right</p>
<p class="sg-preview-label">pattern: CTA 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-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--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</div>
</div>
</article>
</article>
</div>
</div>
</div>
</section>
</section>
</div>
</body>
</html>