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

Add CTA right card variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-23 17:18:20 +02:00
parent fc88afc4b3
commit 3052c94e2f
2 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards-public-page.html
+28
View File
@@ -20,6 +20,34 @@
<p class="sg-body">
Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
</p>
<section id="component-cta-right">
<p class="sg-preview-label">Component: CTA Right</p>
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-cards-public-page__cta-right-card" data-component="content-card" aria-label="CTA Right">
<div class="sg-card-segment sg-card-segment--body sg-cards-public-page__cta-right-body">
<div class="sg-cards-public-page__cta-right-grid">
<div class="sg-cards-public-page__cta-right-copy">
<p class="sg-body">
Ein Satz Text als CTA-Hinweis.
</p>
</div>
<div class="sg-cards-public-page__cta-right-buttons" data-component="link-buttons">
<div class="sg-component-row">
<button class="sg-interaction-element sg-button sg-button--inactive" type="button" data-component="button" data-component-state="inactive" disabled aria-disabled="true">
Link-Button inaktiv
</button>
<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>
</div>
</div>
</article>
</section>
</div>
</div>
</section>
styles/40-components-cards.css
+28
View File
@@ -236,6 +236,34 @@
margin: var(--spacing-large) 0;
}
.sg-page-cards-public-page .sg-cards-public-page__cta-right-card {
width: 60%;
max-width: none;
margin-inline-start: auto;
}
.sg-page-cards-public-page .sg-cards-public-page__cta-right-body {
display: flex;
align-items: center;
}
.sg-page-cards-public-page .sg-cards-public-page__cta-right-grid {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-large);
}
.sg-page-cards-public-page .sg-cards-public-page__cta-right-copy {
flex: 1 1 auto;
min-width: 0;
}
.sg-page-cards-public-page .sg-cards-public-page__cta-right-buttons {
flex: 0 0 auto;
}
.sg-page-cards .sg-group-card > .sg-card {
flex: 0 0 100%;
width: 100%;