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

Replace fundamentals detail boxes with content-card component

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 17:43:29 +02:00
parent c5ed75c20f
commit 21c19ba5d1
2 changed files with 30 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-listen-seite.html
+30 -30
View File
@@ -706,29 +706,29 @@
</div> </div>
</div> </div>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 1</h2> <div class="sg-strong">Box 1</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 2</h2> <div class="sg-strong">Box 2</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 3</h2> <div class="sg-strong">Box 3</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
@@ -760,29 +760,29 @@
</div> </div>
</div> </div>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1 mobil"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 1</h2> <div class="sg-strong">Box 1</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2 mobil"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 2</h2> <div class="sg-strong">Box 2</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
<article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3 mobil"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
<header class="sg-card-segment sg-card-segment--header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<h2 class="sg-heading-h2">Box 3</h2> <div class="sg-strong">Box 3</div>
</header> </div>
<div class="sg-card-segment sg-card-segment--body"> <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. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
</div> </div>
</article> </article>
styleguide.css
-5
View File
@@ -1718,11 +1718,6 @@ section + section {
var(--card-segment-padding-horizontal); var(--card-segment-padding-horizontal);
} }
.sg-card-list-page-drawer__info-card.sg-card {
--surface-card-header-primary: var(--color-light-grey);
--text-card-header: var(--color-font-dark);
}
.sg-card-list-page-mobile-detail { .sg-card-list-page-mobile-detail {
display: none; display: none;
flex-direction: column; flex-direction: column;