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

Simplify CTA right public page layout

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-23 17:51:49 +02:00
parent 1a9055b0d6
commit 82b9a616c5
2 changed files with 16 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards-public-page.html
+15 -19
View File
@@ -8,7 +8,7 @@
</head> </head>
<body class="sg-page-cards-public-page"> <body class="sg-page-cards-public-page">
<h1 class="sg-main-heading">Components – Cards Public Page</h1> <h1 class="sg-main-heading">Component: CTA Right</h1>
<main aria-label="Cards Public Page"> <main aria-label="Cards Public Page">
@@ -20,27 +20,23 @@
Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large. Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
</p> </p>
<section id="component-cta-right"> <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">
<p class="sg-preview-label">Component: CTA Right</p> <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>
<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-cards-public-page__cta-right-buttons" data-component="link-buttons">
<div class="sg-card-segment sg-card-segment--body sg-cards-public-page__cta-right-body"> <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
<div class="sg-cards-public-page__cta-right-grid"> Link-Button
<div class="sg-cards-public-page__cta-right-copy"> </button>
<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">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Link-Button
</button>
</div>
</div> </div>
</div> </div>
</article> </div>
</section> </article>
</div> </div>
</section> </section>
styles/40-components-cards.css
+1 -11
View File
@@ -230,23 +230,12 @@
margin: 0 0 var(--spacing-large) 0; margin: 0 0 var(--spacing-large) 0;
} }
.sg-page-cards-public-page {
overflow-x: hidden;
}
.sg-page-cards .sg-preview-area > .sg-card, .sg-page-cards .sg-preview-area > .sg-card,
.sg-page-cards .sg-preview-area > .sg-transparent-card { .sg-page-cards .sg-preview-area > .sg-transparent-card {
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
.sg-page-cards-public-page #component-content-wrapper-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding-inline: var(--spacing-small);
}
.sg-page-cards-public-page #component-content-wrapper-card > .sg-transparent-card { .sg-page-cards-public-page #component-content-wrapper-card > .sg-transparent-card {
width: 100%; width: 100%;
max-width: none; max-width: none;
@@ -256,6 +245,7 @@
.sg-page-cards-public-page .sg-cards-public-page__cta-right-card { .sg-page-cards-public-page .sg-cards-public-page__cta-right-card {
width: var(--layout-public-content-element-width); width: var(--layout-public-content-element-width);
max-width: none; max-width: none;
margin-top: var(--spacing-large);
margin-inline-start: auto; margin-inline-start: auto;
} }