Merge pull request #32 from IATI/cards

Add extra functionality for cards
IATI · Dec 11, 2024 · 09f4393 · 09f4393
2 parents 9f6c309 + 9bc9cbf
commit 09f4393
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/scss/components/card/_card.scss b/src/scss/components/card/_card.scss
@@ -8,6 +8,8 @@
   background-color: white;
   border-top: $border-width solid $color-teal-90;
   padding: $padding-block;
+  display: flex;
+  flex-direction: column;
 
   & :first-child {
     margin-top: 0;
@@ -52,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>`,
+};