feat: add card gallery component for collections of cards

IATI · Dec 11, 2024 · 9bc9cbf · 9bc9cbf
1 parent 8faeaec
commit 9bc9cbf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/scss/components/card/_card.scss b/src/scss/components/card/_card.scss
@@ -54,3 +54,17 @@
     }
   }
 }
+
+.iati-card-gallery {
+  --min-card-width: 300px;
+
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: $padding-block;
+
+  & > * {
+    flex: 1;
+    min-width: var(--min-card-width);
+  }
+}
diff --git a/src/scss/components/card/card.stories.ts b/src/scss/components/card/card.stories.ts
@@ -41,3 +41,10 @@ export const CardWithMenu: Story = {
     </div>
   `,
 };
+
+export const CardGallery: Story = {
+  render: () =>
+    html`<div class="iati-card-gallery">
+      ${Array(5).fill(Card.render?.call({}))}
+    </div>`,
+};