### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Modals

### 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.

Left Actions Centered Actions Right Actions

          <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.

Small Modal Standard Modal Medium Modal Large Modal Big 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.

Small Modal Standard Modal Medium Modal Large Modal Big Modal

### Go Premium

Unlock more features and business tools by going premium

Cancel Confirm

### Go Premium

Unlock more features and business tools by going premium

Cancel Confirm

### Go Premium

Unlock more features and business tools by going premium

Cancel Confirm

### You were invited

Jimmy H. invited you to join the Heartman & Sons project.

Decline Accept

### You were invited

Jimmy H. invited you to join the Heartman & Sons project.

Decline Accept

### You were invited

Jimmy H. invited you to join the Heartman & Sons project.

Decline Accept

### You were invited

Jimmy H. invited you to join the Heartman & Sons project.

Decline Accept

### You were invited

Jimmy H. invited you to join the Heartman & Sons project.

Decline Accept
Username *
Email *
Comment *
Cancel Publish
Username *
Email *
Comment *
Cancel Publish
Username *
Email *
Comment *
Cancel Publish
Project Name *
Project Members
Add people

- Jimmy H.
- Erik K.
- Alice C.
- Melany W.
- Joshua S.

Project Type *
Select a type
Web development
Design
Marketing
Software
Project Budget *
Project URL *
Description *
Cancel Create
Project Name *
Project Members
Add people

- Jimmy H.
- Erik K.
- Alice C.
- Melany W.
- Joshua S.

Project Type *
Select a type
Web development
Design
Marketing
Software
Project Budget *
Project URL *
Description *
Cancel Create