250 lines
10 KiB
HTML
250 lines
10 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: Notification Card -->
|
||
<section id="component-notification-card">
|
||
<p class="sg-preview-label">Component Notification Card</p>
|
||
|
||
<div class="sg-preview-area">
|
||
|
||
<article class="sg-card" data-component="notification-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card" data-component="notification-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-card--notification-white" data-component="notification-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||
zum Unternehmen
|
||
</button>
|
||
</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">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
|
||
|
||
<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>
|