Dialog

A dialog is a window that passes on information to a user and prompts him for a response.

To see a detailed explanation of all existing helper and size classes, please refer to the usage table below.

Dialog

<div class="dialog is-shown">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Dialog title
                <a class="dialog__close" href="#" title="Close dialog"></a>
            </header>
            <section class="dialog__content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
                </p>
                <img src="assets/images/image.png" alt="image placeholder" />
                <p>
                    Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros.
                </p>
            </section>
        </div>
    </div>
</div>

Dialog size medium

<div class="dialog dialog--medium is-shown">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Dialog size "medium"
                <a class="dialog__close" href="#" title="Close dialog"></a>
            </header>
            <section class="dialog__content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                </p>
                <img src="assets/images/image.png" alt="image placeholder" />
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
                </p>
            </section>
        </div>
    </div>
</div>

Dialog size large

<div class="dialog dialog--large is-shown">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Dialog size "large"
                <a class="dialog__close" href="#" title="Close dialog"></a>
            </header>
            <section class="dialog__content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
                </p>
                <img src="assets/images/image.png" alt="image placeholder" />
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
                </p>
            </section>
        </div>
    </div>
</div>

Frameless dialog

<div class="dialog is-shown dialog--frameless">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Frameless dialog
                <a class="dialog__close" href="#" title="Close dialog"></a>
            </header>
            <section class="dialog__content">
                <img src="assets/images/image.png" alt="image placeholder" />
            </section>
        </div>
    </div>
</div>

Frameless dialog with a list

<div class="dialog is-shown dialog--frameless">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Frameless dialog
                <a class="dialog__close" href="#" title="Close dialog"></a>
            </header>
            <section class="dialog__content">
                <div class="list">
                    <ul class="list__list">
                        <li class="list__item">
                            <div class="item__content">
                                <div class="content__column content__column--primary xs-100 sm-60 md-60 lg-60 xl-60">
                                    <h4 class="item__title">
                                        List item title
                                    </h4>
                                    <div class="item__description">
                                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                                    </div>
                                </div>
                                <div class="content__column xs-50 sm-25 md-25 lg-10 xl-10">
                                    <div class="item__meta">
                                        Additional information
                                    </div>
                                </div>
                                <div class="content__column has-alignment-right xs-50 sm-5 md-5 lg-20 xl-20">
                                    <span class="badge has-bgColor-stateBlue100 has-color-snow">
                                        3
                                    </span>
                                    <i aria-hidden="true" class="iconMdsp information black has-color-stateBlue100"></i>
                                </div>
                            </div>
                        </li>
                        <li class="list__item">
                            <div class="item__content">
                                <div class="content__column content__column--primary xs-100 sm-60 md-60 lg-60 xl-60">
                                    <h4 class="item__title">
                                        Next list item title
                                    </h4>
                                </div>
                                <div class="content__column xs-50 sm-25 md-25 lg-10 xl-10">
                                    <div class="item__meta">
                                        Metainfo
                                    </div>
                                </div>
                                <div class="content__column has-alignment-right xs-50 sm-5 md-5 lg-20 xl-20">
                                    <span class="badge has-bgColor-functionalYellow has-color-snow">
                                        45
                                    </span>
                                    <i aria-hidden="true" class="iconMdsp exclamationDiamond black has-color-functionalYellow"></i>
                                </div>
                            </div>
                        </li>
                        <li class="list__item">
                            <div class="item__content">
                                <div class="content__column content__column--primary xs-100 sm-60 md-60 lg-60 xl-60">
                                    <h4 class="item__title">
                                        Another list item
                                    </h4>
                                    <div class="item__description">
                                        No sea takimata sanctus.
                                    </div>
                                </div>
                                <div class="content__column xs-50 sm-25 md-25 lg-10 xl-10">
                                    <div class="item__meta">
                                        Meta information
                                    </div>
                                </div>
                                <div class="content__column has-alignment-right xs-50 sm-5 md-5 lg-20 xl-20">
                                    <i aria-hidden="true" class="iconMdsp ok black has-color-functionalGreen"></i>
                                </div>
                            </div>
                        </li>
                        <li class="list__item">
                            <div class="item__content">
                                <div class="content__column content__column--primary xs-100 sm-60 md-60 lg-60 xl-60">
                                    <h4 class="item__title">
                                        List item
                                    </h4>
                                    <div class="item__description">
                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                                    </div>
                                </div>
                                <div class="content__column xs-50 sm-25 md-25 lg-10 xl-10">
                                </div>
                                <div class="content__column has-alignment-right xs-50 sm-5 md-5 lg-20 xl-20">
                                    <span class="badge has-bgColor-validationRed has-color-snow">
                                        258
                                    </span>
                                    <i aria-hidden="true" class="iconMdsp attention black has-color-validationRed"></i>
                                </div>
                            </div>
                        </li>
                        <li class="list__item">
                            <div class="item__content">
                                <div class="content__column content__column--primary xs-100 sm-60 md-60 lg-60 xl-60">
                                    <h4 class="item__title">
                                        List item title
                                    </h4>
                                    <div class="item__description">
                                        Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua. At vero eos etaccusam et justo duo dolores.
                                    </div>
                                </div>
                                <div class="content__column xs-50 sm-25 md-25 lg-10 xl-10">
                                    <div class="item__meta">
                                        Information
                                    </div>
                                </div>
                                <div class="content__column has-alignment-right xs-50 sm-5 md-5 lg-20 xl-20">
                                    <i aria-hidden="true" class="iconMdsp ok black has-color-functionalGreen"></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</div>

Dialog with forced interaction

<div class="dialog is-shown">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <header class="dialog__title">
                Dialog with forced interaction
            </header>
            <section class="dialog__content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros, vel aliquam quam nunc at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut massa id enim faucibus interdum a vehicula leo. Fusce et sodales ante.
                </p>
                <img src="assets/images/image.png" alt="image placeholder" />
                <p>
                    Proin pulvinar, dolor vitae feugiat ultricies, leo eros cursus eros.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Usage

ElementClassDescription
.dialog .is-shown Displays the default dialog (default size small).
.dialog .dialog--medium Sets the size of the dialog to medium. This class works in combination with the style-class .dialog--frameless.
.dialog .dialog--large Sets the size of the dialog to large. This class works in combination with the style-class .dialog--frameless.
.dialog .dialog--frameless Applies a frameless dialog style. Note that this class can be used in combination with all available size classes .dialog--medium and .dialog--large.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top