Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog with Complex Layouts
Layouts and grids can be used within a dialog to create complex design.
Important Notes:
While this is possible to do, we do not encourage building complex layouts within a dialog. Consider other design patterns before resorting to this.
Demo
Twig
{% set layout %}
{% include '@bolt-layouts-layout/layout.twig' with {
content: 'Complex layout goes here',
padding_top: 'medium',
padding_bottom: 'none',
} only %}
{% endset %}
{% set footer_content %}
{% include '@bolt-elements-button/button.twig' with {
content: 'View full profile',
display: 'block',
attributes: {
href: 'https://pega.com',
},
} only %}
{% endset %}
{% set dialog_content %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: layout,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: footer_content,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
attributes: {
id: 'dialog-layout'
},
} only %}