137 lines
4.7 KiB
HTML
137 lines
4.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>
|
||
|
||
<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: 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>
|