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

Update company card title and add score bar segment

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 15:06:12 +02:00
parent 7f7de8ad12
commit 4d34a183f4
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/company-card.html
+13 -1
View File
@@ -16,7 +16,7 @@
<div class="sg-object-card-grid"> <div class="sg-object-card-grid">
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card"> <article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header"> <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
<div class="sg-strong">Alcon Inc.</div> <div class="sg-strong">Netflix, Inc.</div>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"> <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"> <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true"> <span class="sg-sandwich-button__icon" aria-hidden="true">
@@ -32,6 +32,18 @@
</div> </div>
</div> </div>
</header> </header>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
<ul class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken">
<li class="sg-score-bar-item">
<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--w96 sg-score-bar__value--positive" data-component-part="score-value"></div>
<span class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" aria-hidden="true" data-component-part="score-marker"></span>
</div>
<p class="sg-score-state sg-score-state--positive" data-component-part="score-state">Positiv</p>
</li>
</ul>
</div>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content"> <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>