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

Add interactive help icons to all tab sub-card titles

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 17:09:19 +02:00
parent 4f003a8709
commit 7edc2945e5
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+10 -10
View File
@@ -107,7 +107,7 @@
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Gesamtbewertung">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></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">
@@ -136,7 +136,7 @@
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Unterschied zur letzten Analyse vom 1.5.2026">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Unterschied zur letzten Analyse vom 1.5.2026</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Unterschied zur letzten Analyse vom 1.5.2026 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Die Investment-Story hat sich insgesamt verbessert, da sich die strukturellen Wachstumstreiber konkretisiert und die Profitabilität deutlich beschleunigt hat.</p>
<p class="sg-body">Die entscheidenden Veränderungen betreffen das Wachstumstempo und die Margenentwicklung. Das Umsatzwachstum beschleunigte sich auf 25 Prozent im Jahresvergleich, angetrieben von einer 28-prozentigen Zunahme im Cloud-Segment. Die bereinigte Bruttomarge stieg um 770 Basispunkte auf 46,1 Prozent, unterstützt durch eine günstigere Produktmischung und Skaleneffekte. Zudem wurde die Prognose für das kommende Quartal auf ein Wachstum von 40 Prozent angehoben, was auf eine anhaltend starke Nachfrage hindeutet.</p>
@@ -147,7 +147,7 @@
</div>
<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">
<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 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></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">
@@ -192,7 +192,7 @@
</div>
<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">
<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 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></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">
@@ -237,7 +237,7 @@
</div>
<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">
<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 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></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">
@@ -282,7 +282,7 @@
</div>
<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">
<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 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></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">
@@ -327,25 +327,25 @@
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-6" role="tabpanel" aria-labelledby="vsf-fundamental-tab-6" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="TAM">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt TAM.</p></div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-7" role="tabpanel" aria-labelledby="vsf-fundamental-tab-7" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Zyklus">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Zyklus.</p></div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-8" role="tabpanel" aria-labelledby="vsf-fundamental-tab-8" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Moat">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Moat.</p></div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-9" role="tabpanel" aria-labelledby="vsf-fundamental-tab-9" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Technologie">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie</div></div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Technologie.</p></div>
</article>
</div>