Add Large Modals #293

1 files changed, 36 insertions, 1 deletions

diff --git a/docs/components.html b/docs/components.html
index 4b6a3e9..ba002e4 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1515,7 +1515,42 @@
             </div>
           </div>
           <div class="docs-note">
-            <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p>
+            <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p>
+          </div>
+          <div class="columns">
+            <div class="column">
+              <a href="#example-modal-2" class="btn btn-primary">Open large size Modal</a>
+              <div class="modal modal-lg" id="example-modal-2">
+                <div class="modal-overlay"></div>
+                <div class="modal-container" role="document">
+                  <div class="modal-header">
+                    <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a>
+                    <div class="modal-title h5">Modal title</div>
+                  </div>
+                  <div class="modal-body">
+                    <div class="content">
+                      <p>This is the content inside the modal.</p>
+                      <h4>Lorem ipsum</h4>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+                      <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+                      <h4>Cupcake ipsum</h4>
+                      <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+                      <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+                      <h4>Candy ipsum</h4>
+                      <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+                      <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button class="btn btn-primary">Share</button>
+                    <a href="#modals-sizes" class="btn btn-link">Close</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="docs-note">
+            <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p>
           </div>
 
 <!-- modals -->