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

Add white star to company card header

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 10:18:49 +02:00
parent 8233735fbf
commit 379a3dec24
3 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/star-filled-white.svg
+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="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="#FFFFFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 228 B

patterns/company-card.html
+4 -1
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__header-star" 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">
styles/23-patterns-object-group-card.css
+15
View File
@@ -31,6 +31,21 @@
color: var(--color-font-light); color: var(--color-font-light);
} }
.sg-company-card__header-title {
display: inline-flex;
align-items: center;
gap: var(--spacing-large);
min-width: 0;
}
.sg-company-card__header-star {
display: inline-block;
flex: 0 0 auto;
inline-size: 1em;
block-size: 1em;
background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
}
.sg-company-card__metric-negative { .sg-company-card__metric-negative {
color: var(--text-company-card-data-negative); color: var(--text-company-card-data-negative);
} }