237 lines
19 KiB
HTML
237 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Pattern Object Card</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Pattern – Object Card</h1>
|
||
<section id="pattern-object-card">
|
||
<p class="sg-preview-label">Pattern: Object Card</p>
|
||
<p class="sg-body">Hinweis: Die hier gezeigten sechs Karten sind nur eine illustrative Demo zur Prüfung des responsiven Verhaltens. Für das Pattern selbst ist die Anzahl der Karten nicht vorgegeben und hängt vom konkreten Use Case ab.</p>
|
||
|
||
<div class="sg-object-card-grid">
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Alcon Inc.</div>
|
||
<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">
|
||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
</span>
|
||
</button>
|
||
<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" href="#">Menüpunkt</a>
|
||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><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"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><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"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><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"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><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"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><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"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><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" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
<h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
|
||
<p class="sg-preview-label">Pattern: Object Card variable height</p>
|
||
<p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
|
||
|
||
<div class="sg-object-card-grid">
|
||
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Alcon Inc.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Meyer Optik AG</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Nordwind Therapeutics Holding</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Valencia Holding Group International</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const updateObjectCardGridRowState = () => {
|
||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||
|
||
if (cards.length <= 1) {
|
||
return;
|
||
}
|
||
|
||
// Measure in native responsive state first (no shared-width lock).
|
||
// Reading offsetTop after reset forces layout with current viewport width.
|
||
const firstTop = cards[0].offsetTop;
|
||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||
|
||
if (!hasMultipleRows) {
|
||
return;
|
||
}
|
||
|
||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||
const referenceCard = firstRowCards[0];
|
||
if (!referenceCard) {
|
||
return;
|
||
}
|
||
|
||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||
grid.classList.add('sg-object-card-grid--multi-row');
|
||
});
|
||
};
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
const panel = wrap.querySelector('.sg-sandwich-menu-panel');
|
||
|
||
if (!button) {
|
||
return;
|
||
}
|
||
|
||
button.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextState = wrap.dataset.open !== 'true';
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||
otherWrap.dataset.open = 'false';
|
||
if (otherButton) {
|
||
otherButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
|
||
wrap.dataset.open = String(nextState);
|
||
button.setAttribute('aria-expanded', String(nextState));
|
||
|
||
if (!nextState || !panel) {
|
||
return;
|
||
}
|
||
|
||
wrap.dataset.align = 'right';
|
||
const panelRect = panel.getBoundingClientRect();
|
||
if (panelRect.left < 0) {
|
||
wrap.dataset.align = 'left';
|
||
}
|
||
});
|
||
});
|
||
|
||
document.addEventListener('click', (event) => {
|
||
if (event.target.closest('.sg-sandwich-menu-wrap')) {
|
||
return;
|
||
}
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
wrap.dataset.open = 'false';
|
||
if (button) {
|
||
button.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
});
|
||
|
||
window.addEventListener('load', updateObjectCardGridRowState);
|
||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|