diff options
1 files changed, 36 insertions, 1 deletions
| -rw-r--r-- | docs/components.html | 37 |
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 --> |