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.
