Modals

Modal Sizes

Modal Template

<div class="modal-header">
    <h7 class="modal-title d-flex justify-content-between">Modal Header</h7>
    <button type="button" class="modal-close icon-btn fill-valyrianSteel fill-hover-whaleTail" ng-click="">
        <svg class="icon-16">
            <use href="../App_Themes/clearview-default/icons/utility/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="modal-body">
    This is the modal's content.
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-text mr-2" ng-click="">Cancel</button>
    <button type="button" class="btn btn-primary" ng-click="">Save</button>
</div>

Modals are a window that appear in an above layer to communicate information while still maintaining context. 

As they are purposefully interruptive, modals should be used sparingly. All app functionality disables when a one appears, and it remains on screen until a required action has been taken or it is dismissed. They trap a users focus.

Types

Small:
Has a width of 300px.



Medium (default): Has a width of 500px.



Large:
Has a width of 800px.



Extra Large:
Has a width of 1140px.

Style

The modal width is dependent on the chosen size, but the height it dependent on the content and screen size. The header and footer are 60px tall, with the title in the header being 20px Lato Regular. Content is all left aligned with the same 32px space.