The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
<!-- With header -->
<div class="modal">
<div class="modal-title">
<h4>Modal header</h4>
<p class="modal-subheader">Modal body text</p>
</div>
<div class="modal-btn">
<a href="#" class="modal-link">Action 1</a>
<a href="#" class="modal-link">Action 2</a>
</div>
</div>
<!-- Without header -->
<div class="modal">
<div class="modal-title">
<p class="modal-subheader">Modal body text</p>
</div>
<div class="modal-btn">
<a href="#" class="modal-link">Action 1</a>
<a href="#" class="modal-link">Action 2</a>
</div>
</div>
Modal body text
Modal body text
<div class="modal stacked">
<div class="modal-title">
<h4>Modal header</h4>
<p class="modal-subheader">Modal body text</p>
</div>
<div class="modal-btn">
<a href="#" class="modal-link"><i class="fa fa-smile-o"></i> Big - Action 1</a>
<a href="#" class="modal-link"><i class="fa fa-smile-o"></i> Big - Action 2</a>
</div>
</div>
<div class="modal modal-icon">
<div class="modal-title">
<h4>Modal header</h4>
</div>
<div class="modal-btn">
<a href="#" class="modal-link"><i class="fa fa-user modal-user"></i> Item 1</a>
<a href="#" class="modal-link"><i class="fa fa-user modal-user"></i> Item 2</a>
<a href="#" class="modal-link"><i class="fa fa-user modal-user"></i> Item 3</a>
</div>
</div>
<div class="modal modal-confirmation">
<div class="modal-title">
<h4>Modal header</h4>
</div>
<div class="modal-input">
<div class="item-div">
<input type="radio" class="items" name="items" value="Item 1">
<label for="item1">Item 1</label>
</div>
<div class="item-div">
<input type="radio" class="items" name="items" value="Item 2">
<label for="item2">Item 2</label>
</div>
<div class="item-div">
<input type="radio" class="items" name="items" value="Item 3">
<label for="item3">Item 3</label>
</div>
<div class="item-div">
<input type="radio" class="items" name="items" value="Item 4">
<label for="item4">Item 4</label>
</div>
<div class="item-div">
<input type="radio" class="items" name="items" value="Item 5">
<label for="item5">Item 5</label>
</div>
</div>
<div class="modal-btn">
<a href="#" class="modal-link">Action 1</a>
<a href="#" class="modal-link">Action 2</a>
</div>
</div>