Init v1

docs/_includes/library/components/modal.html

@@ -0,0 +1,72 @@
+<div class="buttons">
+  <button class="button js-modal-trigger" data-target="modal-empty">Empty</button>
+  <button class="button js-modal-trigger" data-target="modal-image">Image</button>
+  <button class="button js-modal-trigger" data-target="modal-box">Box</button>
+  <button class="button js-modal-trigger" data-target="modal-card">Card</button>
+</div>
+
+<div id="modal-empty" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <!-- Any other Bulma elements you want -->
+  </div>
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+<div id="modal-image" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <p class="image is-4by3">
+      <img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="">
+    </p>
+  </div>
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+<div id="modal-box" class="modal">
+  <div class="modal-background"></div>
+
+  <div class="modal-content">
+    <div class="box">
+      <p>Modal JS example</p>
+      <!-- Your content -->
+    </div>
+  </div>
+
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+<div id="modal-card" class="modal">
+  <div class="modal-background"></div>
+
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <h1>Hello World</h1>
+        <p>
+          Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
+          eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce
+          erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!
+        </p>
+        <h2>Second level</h2>
+        <p>
+          Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi,
+          sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis
+          sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
+        </p>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <div class="buttons">
+        <button class="button is-success">Save changes</button>
+        <button class="button">Cancel</button>
+      </div>
+    </footer>
+  </div>
+
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>