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

Add content cards group pattern and wire into card list layouts

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 18:37:33 +02:00
parent 6d20ae0a01
commit 5652b2dad6
5 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -42,6 +42,7 @@
<li><a href="./patterns/object-card.html">Object Card</a></li>
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
</ul>
patterns/card-listen-fundamentalanalyse-mobile.html
+1 -1
View File
@@ -23,7 +23,7 @@
</div>
</div>
<div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Box 1</div>
patterns/card-listen-seite.html
+1 -1
View File
@@ -706,7 +706,7 @@
</div>
</div>
<div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe">
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Box 1</div>
patterns/content-cards-group.html
+48
View File
@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern Content Cards Group</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – Content Cards Group</h1>
<section id="pattern-content-cards-group">
<p class="sg-preview-label">Pattern: Content Cards Group</p>
<div class="sg-preview-area">
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Gruppe aus Content Cards">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 1">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Box 1</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 2">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Box 2</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 3">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Box 3</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
styleguide.css
+7 -6
View File
@@ -170,6 +170,7 @@
--surface-navigation-card-body: var(--color-white);
--surface-content-block-card-title: var(--color-light-grey);
--surface-content-block-card-content: var(--color-white);
--layout-content-cards-group-gap: var(--spacing-small);
--surface-card-list-drawer: var(--color-background-purple);
--text-content-block-card-title: var(--color-font-dark);
--text-content-block-card-content: var(--color-font-dark);
@@ -1685,6 +1686,12 @@ section + section {
text-align: center;
}
.sg-content-cards-group {
display: flex;
flex-direction: column;
gap: var(--layout-content-cards-group-gap);
}
/* ========================================================= */
/* Layouts: Card Listen Seite */
/* ========================================================= */
@@ -1742,12 +1749,6 @@ section + section {
var(--spacing-small);
}
.sg-card-list-page-detail-group {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.sg-card-list-page > * + * {
margin-top: var(--spacing-large);
}