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

Populate layout 3 list card content based on company card

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 09:01:35 +02:00
parent ccf215accb
commit e498743c7a
1 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-card.html
+58 -1
View File
@@ -166,7 +166,64 @@
</div>
</div>
</header>
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content"></div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" 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 sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
PE: <span class="sg-data-table__value">28.8</span>
</p>
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
</p>
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
</p>
</div>
</div>
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="company-card-content">
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" 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">Marktbewertung:</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>
</div>
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Wachstum:</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--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
</div>
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Profitabilität:</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--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
</div>
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilität:</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--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
</div>
</div>
<p class="sg-body sg-company-card__summary">BESCHREIBUNG LISTE</p>
</div>
</article>
</div>
</section>