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

Add spacing-large margin after both group card component variants

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 11:11:24 +02:00
parent c0f90ba739
commit f5662ca1ed
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards.html
+2 -2
View File
@@ -139,7 +139,7 @@
<section id="component-group-card"> <section id="component-group-card">
<p class="sg-preview-label">Component: Group Card</p> <p class="sg-preview-label">Component: Group Card</p>
<div class="sg-group-card" data-component="group-card"> <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
<article class="sg-card" data-component="card" data-component-context="group-card"> <article class="sg-card" data-component="card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
@@ -169,7 +169,7 @@
<p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p> <p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
<div class="sg-group-card" data-component="group-card"> <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2> <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
<article class="sg-card" data-component="card" data-component-context="group-card"> <article class="sg-card" data-component="card" data-component-context="group-card">
styles/40-components-cards.css
+4
View File
@@ -167,6 +167,10 @@
width: calc(50% - var(--spacing-small)); width: calc(50% - var(--spacing-small));
} }
.sg-group-card--margin-after-large {
margin-bottom: var(--spacing-large);
}
.sg-group-card__heading { .sg-group-card__heading {
flex: 0 0 100%; flex: 0 0 100%;
margin-top: 0; margin-top: 0;