Initial commit: add styleguide project

2026-05-18 16:00:56 +02:00
commit 5abea83034
20 changed files with 6537 additions and 0 deletions
@@ -0,0 +1,115 @@
+<!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>