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

Add score bar segment below headers for four fundamental tabs

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 16:49:34 +02:00
parent 8b6dc33b9e
commit cce7f7c332
1 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+48
View File
@@ -148,24 +148,72 @@
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden> <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Marktbewertung"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Marktbewertung">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung</div></div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung</div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
</div>
</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Marktbewertung.</p></div> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Marktbewertung.</p></div>
</article> </article>
</div> </div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden> <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Wachstum"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Wachstum">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum</div></div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum</div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
</div>
</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div>
</article> </article>
</div> </div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden> <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Profitabilität"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Profitabilität">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität</div></div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität</div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
</div>
</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div>
</article> </article>
</div> </div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden> <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Stabilität"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Stabilität">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität</div></div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität</div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
</div>
</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div>
</article> </article>
</div> </div>