230 lines
8.7 KiB
HTML
230 lines
8.7 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 – 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: Basic Card -->
|
||
<section id="component-basic-card">
|
||
<p class="sg-preview-label">Component: Basic Card</p>
|
||
|
||
<div class="sg-preview-area">
|
||
|
||
<article class="sg-card" data-component="basic-card">
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||
<p class="sg-body">
|
||
Basic Card mit nur einem Segment und hellgrauer Fläche gemäss Token.
|
||
</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>
|