Add company card bookmark icon

This commit is contained in:
2026-06-15 10:06:44 +02:00
parent 338afe1a26
commit 1412db647b
4 changed files with 37 additions and 2 deletions
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="M7 3h10a1 1 0 0 1 1 1v17l-6-3.75L6 21V4a1 1 0 0 1 1-1Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 187 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
<path d="M7 3h10a1 1 0 0 1 1 1v17l-6-3.75L6 21V4a1 1 0 0 1 1-1Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 244 B

+8 -2
View File
@@ -16,7 +16,10 @@
<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">Netflix, Inc.</div> <div class="sg-company-card__header-title">
<div class="sg-strong">Netflix, Inc.</div>
<span class="sg-company-card__bookmark-icon" aria-hidden="true"></span>
</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">
@@ -26,7 +29,10 @@
</span> </span>
</button> </button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"> <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a> <a class="sg-sandwich-menu-link sg-company-card__bookmark-menu-link" href="#">
<span class="sg-company-card__bookmark-icon" aria-hidden="true"></span>
<span>Merken</span>
</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a> <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a> <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div> </div>
+23
View File
@@ -35,6 +35,29 @@
color: var(--text-company-card-data-negative); color: var(--text-company-card-data-negative);
} }
.sg-company-card__header-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
min-width: 0;
}
.sg-company-card__bookmark-icon {
display: inline-block;
inline-size: 1em;
block-size: 1em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url("../assets/icons/bookmark-filled.svg") no-repeat center / contain;
mask: url("../assets/icons/bookmark-filled.svg") no-repeat center / contain;
}
.sg-company-card__bookmark-menu-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-company-card__analysis-title { .sg-company-card__analysis-title {
margin: 0; margin: 0;
} }