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

Add public call to action box pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-26 14:47:26 +02:00
parent 2cb6214f4a
commit 901077cfeb
4 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/public-page-patterns.html
+19 -1
View File
@@ -192,7 +192,25 @@
</div>
</div>
<p class="sg-preview-label">pattern: picture full width</p>
<p class="sg-preview-label">pattern: Public Call to Action Box</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-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box" aria-label="Public Call to Action Box">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<ul class="sg-bullet-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
<li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
<li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
<li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
</ul>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: picture full width</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
semantic-tokens-patterns.html
+1
View File
@@ -21,6 +21,7 @@
<tr><td>layout-public-page-pattern-text-picture-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Patterns <code>Pattern: text and picture right</code> mit zwei gleich breiten Spalten.</td></tr>
<tr><td>layout-public-page-pattern-text-picture-gap</td><td>spacing-large</td><td>Spaltenabstand zwischen Text und Bild im Pattern <code>Pattern: text and picture right</code>.</td></tr>
<tr><td>text-public-page-pattern-text-picture</td><td>color-font-light</td><td>Textfarbe des Patterns <code>Pattern: text and picture right</code>.</td></tr>
<tr><td>layout-public-page-pattern-call-to-action-box-width</td><td>calc(var(--dimension-public-content-width) * 0.5)</td><td>Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext.</td></tr>
</tbody>
</table>
styles/01-foundations.css
+1
View File
@@ -195,6 +195,7 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
--layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--surface-card-list-drawer: var(--color-background-purple);
styles/45-patterns-public-page-patterns.css
+10
View File
@@ -8,6 +8,12 @@
width: 100%;
}
.sg-public-page-pattern-call-to-action-box {
width: var(--layout-public-page-pattern-call-to-action-box-width);
max-width: 100%;
margin-inline: auto;
}
.sg-public-page-pattern-text-and-picture-right {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -132,4 +138,8 @@
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 100%;
}
.sg-public-page-pattern-call-to-action-box {
width: 100%;
}
}