115 lines
3.9 KiB
HTML
115 lines
3.9 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: Card -->
|
||
<section id="component-card">
|
||
<p class="sg-preview-label">Component: Card</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 Header</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">Alternative Header</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">Darkbrown Header</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: 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> |