Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1,212 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Cards</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body class="sg-page-cards">
|
||||
|
||||
<h1 class="sg-main-heading">Components – Cards</h1>
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Card Styles -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- ========================================================= -->
|
||||
<!-- Components -->
|
||||
<!-- ========================================================= -->
|
||||
|
||||
<!-- Component: Cards -->
|
||||
<section id="component-card">
|
||||
<p class="sg-preview-label">Component: Cards</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 1</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Standard Card mit Header und hellem Body-Segment.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 2</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Alternative Farbvariante des Header-Segments.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown" data-component-part="card-header">
|
||||
<div class="sg-strong">Card 3</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Kein weißer Trenner zwischen darkbrown und hellem Segment.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Content Card -->
|
||||
<section id="component-content-card">
|
||||
<p class="sg-preview-label">Component: Content Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Content Card</div>
|
||||
</div>
|
||||
|
||||
<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 luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue. Donec sed lorem in urna sagittis.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Group Card -->
|
||||
<section id="component-group-card">
|
||||
<p class="sg-preview-label">Component: Group Card</p>
|
||||
|
||||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card in Group</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Group Cards bündeln mehrere zusammengehörige Cards.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
|
||||
<div class="sg-strong">Weitere Card</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Die Group Card ist eine eigenständige Component.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
|
||||
|
||||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||||
<div class="sg-group-card__header-row">
|
||||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
|
||||
<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="Gruppenmenü ö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="Gruppenmenü" data-component-part="sandwich-panel">
|
||||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Gruppenüberschrift anpassen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Card in Group</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Group Cards bündeln mehrere zusammengehörige Cards.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
|
||||
<div class="sg-strong">Weitere Card</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">
|
||||
Die Group Card enthält hier zusätzlich eine H2-Überschrift.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Multisegment Card -->
|
||||
<section id="component-multisegment-card">
|
||||
<p class="sg-preview-label">Component: Multisegment Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<article class="sg-card" data-component="multisegment-card">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Multisegment Card</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-segment">
|
||||
<p class="sg-body">Erstes graues Segment mit Textinhalt.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-segment">
|
||||
<p class="sg-body">Zweites graues Segment mit Textinhalt.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-segment">
|
||||
<p class="sg-body">Erstes weißes Segment.</p>
|
||||
</div>
|
||||
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-segment">
|
||||
<p class="sg-body">Zweites weißes Segment.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Component: Transparent Card -->
|
||||
<section id="component-transparent-card">
|
||||
<p class="sg-preview-label">Component: Transparent Card</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
<div class="sg-transparent-card" data-component="transparent-card">
|
||||
<p class="sg-body">
|
||||
Transparente Card mit standardisiertem Card-Padding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user