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

Align card list intro with transparent card and 60% text pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-22 07:23:23 +02:00
parent ecfa2660ae
commit e876ccc8ab
3 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-listen-seite.html
+10 -13
View File
@@ -100,21 +100,18 @@
</div> </div>
</div> </div>
<div class="sg-card-list-page__title-row"> <div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur Listenübersicht" data-component="transparent-card">
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1> <div class="sg-card-list-page__title-row">
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page"> <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1>
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button> <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel"> <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
Hilfe zur Listenansicht und zu den Filteroptionen. <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
Hilfe zur Listenansicht und zu den Filteroptionen.
</span>
</span> </span>
</span>
</div>
<article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur Listenübersicht">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
</div> </div>
</article> <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
</div>
<div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Objektliste"> <div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Objektliste">
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 1"> <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 1">
patterns/vsf-card-listen-seite.html
+10 -13
View File
@@ -100,21 +100,18 @@
</div> </div>
</div> </div>
<div class="sg-card-list-page__title-row"> <div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
<h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF Listenübersicht</h1> <div class="sg-card-list-page__title-row">
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page"> <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF Listenübersicht</h1>
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur VSF Listenübersicht anzeigen" data-component-part="help-trigger">?</button> <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel"> <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur VSF Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
Hilfe zur Listenansicht und zu den Filteroptionen. <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
Hilfe zur Listenansicht und zu den Filteroptionen.
</span>
</span> </span>
</span>
</div>
<article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur VSF Listenübersicht">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
</div> </div>
</article> <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
</div>
<div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Company Liste"> <div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Company Liste">
<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">
styleguide.css
+17 -9
View File
@@ -2067,26 +2067,34 @@ section + section {
margin-top: var(--spacing-large); margin-top: var(--spacing-large);
} }
.sg-card-list-page > .sg-card-list-page__intro-card { .sg-card-list-page > .sg-card-list-page__intro-block {
margin-top: calc(var(--spacing-large) - 0.5rem); margin-top: calc(var(--spacing-large) - 0.5rem);
} }
.sg-card-list-page__intro-card.sg-card { .sg-card-list-page__intro-block {
--layout-card-body-padding-top: 0; display: flex;
--layout-card-body-padding-bottom: 0; flex-direction: column;
--surface-card-body: var(--surface-card-transparent); gap: var(--spacing-large);
align-self: flex-start; }
width: min(60vw, 100%);
.sg-card-list-page__title-row {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
width: fit-content;
max-width: 100%; max-width: 100%;
} }
.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
width: min(60vw, 100%);
}
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-card-list-page-drawer { .sg-card-list-page-drawer {
display: none; display: none;
} }
.sg-card-list-page__intro-card.sg-card { .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
align-self: stretch;
width: 100%; width: 100%;
} }
} }