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

Achievements

Most Recent Certifications


Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021

Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021

Zertifizierter Kundenservice-Systemarchitekt
Version 7.2 | Nov 7, 2021

Most Recent Badges

Twig
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 %}
HTML
Not available in plain HTML. Please use Twig.