Indigo Design System v0.6.0

Modals Work In Progress

Modals are dialog box/popups that displayed on top of the current page.

Simple Modal

close
Confirm?
Starting a new Form 460 revision will cause your current draft Form 460 to be deleted.
<button class="indi-button indi-button--primary indi-button--small indi-modal-target"> Trigger Simple Modal </button>
<div class="indi-modal ">
    <div class="indi-modal__content">
        <div class="indi-modal__header">
            <div class="indi-modal__close" aria-label="Close Modal">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>close</title>
                    <use xlink:href="/assets/icons/indi_icons.svg#close">
                </svg>
            </div>
            <div>Confirm?
                <span class="indi-header__help-text"> </span>
                <span class="indi-header__help-icon"> </span>
            </div>
        </div>
        <div class="indi-modal__body"> Starting a new Form 460 revision will cause your current draft Form 460 to be deleted. </div>
        <div class="indi-modal__footer">
            <button class="indi-button indi-button--tertiary"> Cancel </button>
            <button class="indi-button indi-button--primary"> Continue </button>
        </div>
    </div>
</div>

Complex Modal

close
Letter of Authorization(LOA) LOA Instructions information
information The white zone is for immediate loading.
<button class="indi-button indi-button--primary indi-button--small indi-modal-target"> Trigger Complex Modal </button>
<div class="indi-modal indi-modal--wide">
    <div class="indi-modal__content">
        <div class="indi-modal__header">
            <div class="indi-modal__close" aria-label="Close Modal">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>close</title>
                    <use xlink:href="/assets/icons/indi_icons.svg#close">
                </svg>
            </div>
            <div>Letter of Authorization(LOA)
                <span class="indi-header__help-text"> LOA Instructions </span>
                <span class="indi-header__help-icon">
                    <svg class="indi-icon" aria-labelledby="title">
                        <title>information</title>
                        <use xlink:href="/assets/icons/indi_icons.svg#information">
                    </svg>
                </span>
            </div>
        </div>
        <div class="indi-modal__body">
            <div class="indi-notification">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>information</title>
                    <use xlink:href="/assets/icons/indi_icons.svg#information">
                </svg> The white zone is for immediate loading.</div>
            <div class="indi-form__input-row">
                <div class="indi-form__input-group">
                    <label class="indi-form__label">LOA Required? </label>
                    <label class="indi-form__radio-button" for="yes--2643">
                        <input id="yes--2643" name="day-of-the-week" value="blue" type="radio" class="indi-form__radio-button-input" checked />
                        <span class="indi-form__radio-button-icon"></span>
                        <span class="indi-form__radio-button-text "> Yes </span>
                    </label>
                    <label class="indi-form__radio-button" for="no--71011">
                        <input id="no--71011" name="day-of-the-week" value="blue" type="radio" class="indi-form__radio-button-input" />
                        <span class="indi-form__radio-button-icon"></span>
                        <span class="indi-form__radio-button-text "> No </span>
                    </label>
                </div>
                <div class="indi-form__input-group">
                    <label class="indi-form__label">First Name
                        <abbr class="indi-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="indi-screenreader-only">Required Field.</span>
                    </label>
                    <input class="indi-form__input" type="text"> </div>
            </div>
        </div>
        <div class="indi-modal__footer">
            <button class="indi-button indi-button--tertiary"> Cancel </button>
            <button class="indi-button indi-button--primary"> Continue </button>
        </div>
    </div>
</div>