Make all cards on components cards page render full width

2026-05-21 11:41:16 +02:00
parent 4a0e4abef9
commit d650caf79c
2 changed files with 18 additions and 1 deletions
@@ -6,7 +6,7 @@
  <title>Styleguide – Cards</title>
  <link rel="stylesheet" href="../styleguide.css">
 </head>
-<body>
+<body class="sg-page-cards">

  <h1 class="sg-main-heading">Components – Cards</h1>

@@ -2341,6 +2341,23 @@ section + section {
  width: calc(50% - var(--spacing-small));
 }

+.sg-page-cards .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sg-page-cards .sg-preview-area > .sg-card,
+.sg-page-cards .sg-preview-area > .sg-transparent-card {
+  width: 100%;
+  max-width: none;
+}
+
+.sg-page-cards .sg-group-card > .sg-card {
+  flex: 0 0 100%;
+  width: 100%;
+}
+
 .sg-transparent-card {
  color: var(--text-card-transparent);
  background: var(--surface-card-transparent);