Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

H Modal

Huro provides a custom modal implementation. Use the existing modal markup and paste it into your page to try it. Use the is-start, is-centered, is-end classes on the modal-card-foot element to change the actions alignment.


      <a class="button h-button is-rounded h-modal-trigger" data-modal="demo-right-actions-modal">Right Actions</a>
      
      <div id="demo-right-actions-modal" class="modal h-modal">
          <div class="modal-background  h-modal-close"></div>
          <div class="modal-content">
              <div class="modal-card">
                  <header class="modal-card-head">
                      <h3>Did you know?</h3>
                      <button class="h-modal-close ml-auto" aria-label="close">
                          <i data-feather="x"></i>
                      </button>
                  </header>
                  <div class="modal-card-body">
                      <div class="inner-content">
                          <div class="section-placeholder">
                              <div class="placeholder-content">
                                  <img src="assets/img/placeholders/huro-1.svg" alt="">
                                  <h3 class="dark-inverted">Go Premium</h3>
                                  <p>Unlock more features and business tools by going premium</p>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="modal-card-foot is-end">
                      <a class="button h-button is-rounded h-modal-close">Cancel</a>
                      <a class="button h-button is-primary is-raised is-rounded">Confirm</a>
                  </div>
              </div>
          </div>
      </div>
      

Modal Sizes

Huro provides a custom modal implementation. Use the existing modal markup and paste it into your page to try it. Use the is-small, is-medium, is-large and is-big classes on the h-modal element to change the size of the modal.

Modal Forms

Huro provides a custom modal implementation. Use the existing modal markup and paste it into your page to try it. Modals work pretty well with form elements. Check the below examples to get some inspiration about how you can build beautiful modal forms.