Add card grid stream blocks

kmicms/core/blocks/base.py

@@ -1,13 +1,14 @@
 from wagtail import blocks
 
 from .components import MastheadBlock, ShowcaseBlock
-from .elements import AlertBlock, HeadingBlock
+from .elements import AlertBlock, CardGridBlock, HeadingBlock
 
 
 class StoryBlock(blocks.StreamBlock):
     heading = HeadingBlock()
     rich_text = blocks.RichTextBlock(editor="all-but-headings")
     alert = AlertBlock()
+    card_grid = CardGridBlock()
 
 
 class ContainerBlock(blocks.StructBlock):

kmicms/core/blocks/elements.py

@@ -1,4 +1,5 @@
 from wagtail import blocks
+from wagtail.images.blocks import ImageChooserBlock
 
 
 class HeadingBlock(blocks.StructBlock):
@@ -48,3 +49,25 @@ class CallToActionBlock(blocks.StructBlock):
 
     class Meta:
         template = "core/blocks/elements/call-to-action.html"
+
+
+class CardBlock(blocks.StructBlock):
+    image = ImageChooserBlock()
+    title = blocks.TextBlock()
+    text = blocks.RichTextBlock()
+
+    class Meta:
+        label = "Card"
+        template = "core/blocks/elements/card.html"
+
+
+class CardGridBlock(blocks.StructBlock):
+    grid_class = blocks.ChoiceBlock(
+        [("row-cols-md-2", "2 Cards Wide"), ("row-cols-md-3", "3 Cards Wide"), ("row-cols-md-4", "4 Cards Wide")],
+        label="Grid Type",
+    )
+    card_list = blocks.ListBlock(CardBlock(), label="Cards")
+
+    class Meta:
+        label = "Card Grid"
+        template = "core/blocks/elements/card-grid.html"

kmicms/core/templates/core/blocks/elements/card-grid.html

@@ -0,0 +1,8 @@
+{% load wagtailcore_tags %}
+<div class="row row-cols-1 {{ value.grid_class }} g-4">
+    {% for card in value.card_list %}
+        <div class="col">
+            {% include_block card %}
+        </div>
+    {% endfor %}
+</div>

kmicms/core/templates/core/blocks/elements/card.html

@@ -0,0 +1,9 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+{% image value.image width-728 height-240 as tmp_image %}
+<div class="card">
+  <img src="{{ tmp_image.url }}" class="card-img-top" alt="Image">
+  <div class="card-body">
+    <h5 class="card-title">{{ value.title }}</h5>
+    <p class="card-text">{{ value.text|richtext}}</p>
+  </div>
+</div>