Dialogs

For a dialog you can choose from a few different types simple, alert, confirmation and fullscreen.

Simple dialog

The simple dialog consists of a dialog a header and list items.

User 1
User 2
User 3

    
<div class="dialog dialog--simple" id="simple2">
    <div class="dialog__header">Users</div>

    <div class="dialog__content">
        <ul class="list">
            <li class="list--single-line list--support">
                <div class="list__support__image"><img src="//via.placeholder.com/40x40"></div>
                <span class="list__content">User 1</span>
            </li>
            <li class="list--single-line list--support">
                <div class="list__support__image"><img src="//via.placeholder.com/40x40"></div>
                <span class="list__content">User 2</span>
            </li>
            <li class="list--single-line list--support">
                <div class="list__support__image"><img src="//via.placeholder.com/40x40"></div>
                <span class="list__content">User 3</span>
            </li>
        </ul>
    </div>
</div>

Alert dialog

An alert dialog consist of some text and one or more actions.

Save draft?

    
<div class="dialog dialog--alert" id="alert1">
    <div class="dialog__content">
        Save draft?
    </div>

    <div class="dialog__actions">
        <button class="button button--text">
            Cancel
        </button>

        <button class="button button--text">
            Discard
        </button>
    </div>
</div>

Confirmation dialog

The confirmation dialog exists of an header, text and some actions. The content/ text is also scrollable.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae culpa dicta dolorum excepturi expedita harum maxime molestiae nam odio qui quibusdam quis quo recusandae repudiandae, sapiente tempore voluptas voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto at atque corporis cupiditate deleniti, ea eius error harum id impedit inventore minus neque possimus quasi quia totam vel voluptates.

    
<div class="dialog dialog--confirm" id="confirm1">
    <div class="dialog__header">
        Dialog header
    </div>

    <div class="dialog__content">
        Content
    </div>

    <div class="dialog__actions">
        <button class="button button--text">
            Action 1
        </button>

        <button class="button button--text">
            Action 2
        </button>
    </div>
</div>

Full-screen dialog

The full-screen will cover the full screen as it's name already suggests.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam autem consequuntur dolor dolores laborum mollitia nemo nobis nulla officiis optio, perspiciatis possimus quidem rerum saepe sequi tenetur unde veritatis.

The full screen dialog could also contain a form

    
<div class="dialog dialog--full-screen" id="full-screen1">
    <div class="dialog__header">
        <i class="material-icons icon" data-trigger="null">close</i>

        <div class="dialog__header__title">
            Title
        </div>

        <div class="dialog__header__action">
            <button class="button button--text">Action</button>
        </div>
    </div>

    <div class="dialog__content" id="null">
        <p>
            Content
        </p>

        <p>
            The full screen dialog could also contain a form
        </p>

        <form>
            <div class="text-field text-field--filled">
                <input type="text" id="first_name" class="text-field__input">
                <label class="text-field__label" for="first_name">First name</label>
            </div>

            <div class="text-field text-field--filled">
                <input type="text" id="last_name" class="text-field__input">
                <label class="text-field__label" for="last_name">Last name</label>
            </div>

            <div class="text-field text-field--filled">
                <input type="text" id="username" class="text-field__input">
                <label class="text-field__label" for="username">Username</label>
            </div>
        </form>
    </div>
</div>