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

Add VSF list card layout page with state variants

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 16:22:42 +02:00
parent 824f137aeb
commit 593e06d927
2 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -64,6 +64,7 @@
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3> <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
<ul class="sg-index-list"> <ul class="sg-index-list">
<li><a href="./patterns/company-card.html">Company Card</a></li> <li><a href="./patterns/company-card.html">Company Card</a></li>
<li><a href="./patterns/vsf-list-card.html">VSF List Card</a></li>
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li> <li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li> <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li> <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
patterns/vsf-list-card.html
+67
View File
@@ -0,0 +1,67 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Layout VSF List Card</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – VSF List Card</h1>
<section id="layout-vsf-list-card">
<p class="sg-preview-label">Layout: VSF List Card</p>
<p class="sg-body">Diese Layout-Seite zeigt VSF-spezifische Statusvarianten der List Card als Grundlage fuer weitere Ausdifferenzierungen.</p>
<h2 class="sg-sub-heading sg-section-h2">Status: Default</h2>
<div class="sg-object-card-grid" aria-label="VSF List Card Status Default">
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="VSF List Card Default">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Alphabet Inc.</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
<p class="sg-body">Status-Referenz: Default</p>
</div>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Status: Hover</h2>
<div class="sg-object-card-grid" aria-label="VSF List Card Status Hover">
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="hover" aria-label="VSF List Card Hover">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Microsoft Corp.</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
<p class="sg-body">Status-Referenz: Hover</p>
</div>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Status: Selected</h2>
<div class="sg-object-card-grid" aria-label="VSF List Card Status Selected">
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="selected" aria-label="VSF List Card Selected">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Amazon.com, Inc.</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
<p class="sg-body">Status-Referenz: Selected</p>
</div>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Status: Disabled</h2>
<div class="sg-object-card-grid" aria-label="VSF List Card Status Disabled">
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="disabled" aria-label="VSF List Card Disabled" aria-disabled="true">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Tesla, Inc.</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
<p class="sg-body">Status-Referenz: Disabled</p>
</div>
</article>
</div>
</section>
</body>
</html>