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

Update cards component labels and add content card example

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 17:41:20 +02:00
parent 331af1146b
commit c5ed75c20f
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards.html
+27 -6
View File
@@ -18,15 +18,15 @@
<!-- Components -->
<!-- ========================================================= -->
<!-- Component: Card -->
<!-- Component: Objekt Cards -->
<section id="component-card">
<p class="sg-preview-label">Component: Card</p>
<p class="sg-preview-label">Component: Objekt Cards</p>
<div class="sg-preview-area">
<article class="sg-card" data-component="card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card Header</div>
<div class="sg-strong">Objekt Card 1</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -38,7 +38,7 @@
<article class="sg-card" data-component="card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
<div class="sg-strong">Alternative Header</div>
<div class="sg-strong">Objekt Card 2</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -50,7 +50,7 @@
<article class="sg-card" data-component="card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown" data-component-part="card-header">
<div class="sg-strong">Darkbrown Header</div>
<div class="sg-strong">Objekt Card 3</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -63,6 +63,27 @@
</div>
</section>
<!-- Component: Content Card -->
<section id="component-content-card">
<p class="sg-preview-label">Component: Content Card</p>
<div class="sg-preview-area">
<article class="sg-card sg-card--content-card" data-component="content-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Content Card</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue. Donec sed lorem in urna sagittis.
</p>
</div>
</article>
</div>
</section>
<!-- Component: Group Card -->
<section id="component-group-card">
<p class="sg-preview-label">Component: Group Card</p>
@@ -112,4 +133,4 @@
</section>
</body>
</html>
</html>
styleguide.css
+7
View File
@@ -1894,6 +1894,13 @@ section + section {
background: var(--surface-card-header-muted);
}
.sg-card--content-card {
--surface-card-header-primary: var(--surface-content-block-card-title);
--surface-card-body: var(--surface-content-block-card-content);
--text-card-header: var(--text-content-block-card-title);
--text-card-body: var(--text-content-block-card-content);
}
.sg-card-segment + .sg-card-segment {
box-shadow: inset 0 1px 0 var(--divider-card-segment);
}