Modal: Size: Small with Message and Buttons

Ready

HTML
View
Context
Assets
Notes


        
        <script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
    <aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal>
        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
            <div class="modal__container--small" role="dialog" aria-modal="true" aria-labelledby="test-modal-title">
                <div class="modal__container-inner">
                    <header class="modal__header">
                        <h3 class="modal__title" id="test-modal-title">Test Modal</h3>
                        <div class="modal__close">
                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                <span class="visually-hidden">Close modal</span>
                            </button>
                        </div>
                    </header>
                    <main class="modal__content" id="test-modal-content">

                        <div class="message--warning has-no-space">
                            <div class="message__container--disabled">
                                <span class="visually-hidden"></span>
                                <div class="message__content">
                                    <p class="message__text">Wollen Sie den Warenkorb und alle enthaltenen Artikel permanent löschen?</p>
                                </div>
                            </div>
                        </div>
                    </main>
                    <div class="modal__buttons">
                        <div class="modal__button--confirm">
                            <button class="button--primary-small" type="submit">Löschen</button>
                        </div>
                        <div class="modal__button--cancel">
                            <button class="button--tertiary-light-small" type="submit">Abbrechen</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
    <button class="button--primary-small" type="submit">Open</button>
</div>


        {% include '@SharedComponents/modules/shared/components/modal/modal.twig' %}


        
            
            {
  "id": "test-modal",
  "title": "Test Modal",
  "footer": null,
  "closeLabel": "Close modal",
  "headingLevel": "3",
  "demo": true,
  "size": "small",
  "message": {
    "variant": "warning",
    "isHidden": false,
    "textOnly": true,
    "spacing": false,
    "message": "Wollen Sie den Warenkorb und alle enthaltenen Artikel permanent löschen?",
    "container": false
  },
  "cancelButton": {
    "variant": "tertiary-light-small",
    "type": "button",
    "title": "Abbrechen"
  },
  "confirmButton": {
    "variant": "primary-small",
    "type": "button",
    "title": "Löschen"
  }
}

File:

Content:


                                import ModalDemo, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-demo';

export default ModalDemo;
export const selector = sel;

URL: /components/raw/modal/modal-demo.js
Filesystem Path: src/components/modules/shared/components/modal/modal-demo.js
Size: 181 Bytes

Content:


                                import ModalMediator, {name as title} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-mediator';

export default ModalMediator;
export const name = title;

URL: /components/raw/modal/modal-mediator.js
Filesystem Path: src/components/modules/shared/components/modal/modal-mediator.js
Size: 189 Bytes

Content:
import './modal.scss';
URL: /components/raw/modal/modal.js
Filesystem Path: src/components/modules/shared/components/modal/modal.js
Size: 22 Bytes

Content:


                                @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/modal/modal";

URL: /components/raw/modal/modal.scss
Filesystem Path: src/components/modules/shared/components/modal/modal.scss
Size: 112 Bytes

No notes defined.