Initial commit

_includes/feature/modal.html

@@ -0,0 +1,31 @@
+{% comment %}
+
+    Bootstrap Modal, https://getbootstrap.com/docs/5.1/components/modal/
+
+    E.G. --> {% include feature/modal.html button="More Info" color="info" title="Information" text="Example text" %}
+
+    Options: 
+    - "button" = text of button to trigger modal
+    - "color" = color of modal button (primary, secondary, success, danger, warning, info, light, dark)
+    - "title" = header text for modal pop up
+    - "text" = body text for modal pop up, can use markdown formatting (tip: use a Liquid capture to add more complex content)
+
+{%- endcomment -%}
+<!-- Button trigger modal -->
+<p class="text-center mb-3">
+    <button type="button" class="btn btn-{{ include.color | default: 'primary' }}" data-bs-toggle="modal" data-bs-target="#{{ include.button | slugify }}Modal">{{ include.button }}</button>
+</p>
+<!-- Modal -->
+<div class="modal fade" id="{{ include.button | slugify }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ include.button | slugify }}ModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title" id="{{ include.button | slugify }}ModalLabel">{{ include.title }}</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" >
+            {{ include.text | markdownify }}
+            </div>
+        </div>
+    </div>
+</div>