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

Add variable-height object card variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-10 14:28:05 +02:00
parent 57fbe63b2e
commit be34e0444d
2 changed files with 69 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/object-card.html
+66
View File
@@ -103,6 +103,72 @@
</footer>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
<p class="sg-preview-label">Pattern: Object Card variable height</p>
<p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
<div class="sg-object-card-grid">
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Alcon Inc.</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
<div class="sg-object-card__actions">
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Analyse</button>
</div>
</footer>
</article>
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Meyer Optik AG</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
<div class="sg-object-card__actions">
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Portfolio</button>
</div>
</footer>
</article>
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Nordwind Therapeutics Holding</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
<div class="sg-object-card__actions">
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Detailansicht</button>
</div>
</footer>
</article>
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Valencia Holding Group International</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
<div class="sg-object-card__actions">
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
</div>
</footer>
</article>
</div>
</section>
<script>
styles/22-patterns-object-card.css
+3
View File
@@ -67,3 +67,6 @@
min-width: 0;
}
.sg-object-card--variable-height {
height: auto;
}