168 lines
6.0 KiB
HTML
168 lines
6.0 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>
|
||
|
||
<h1 class="sg-main-heading">Components – Cards</h1>
|
||
|
||
<!-- ========================================================= -->
|
||
<!-- Card Styles -->
|
||
<!-- ========================================================= -->
|
||
|
||
<!-- ========================================================= -->
|
||
<!-- Components -->
|
||
<!-- ========================================================= -->
|
||
|
||
<!-- Component: Objekt Cards -->
|
||
<section id="component-card">
|
||
<p class="sg-preview-label">Component: Objekt 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">Objekt 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">Objekt 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">Objekt 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" 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>
|
||
</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 ohne Padding.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|