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

Share profile

  • Facebook
  • X
  • LinkedIn
  • Email
  • More options

  • Achievements

    Most Recent Certifications

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
    Zertifizierter Kundenservice-Systemarchitekt
    Version 7.2 | Nov 7, 2021
    Download certificate

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
    Zertifizierter Kundenservice-Systemarchitekt
    Version 7.2 | Nov 7, 2021
    Download certificate

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, repellat ea? Eius veritatis et velit, sed, vero vitae tenetur blanditiis modi assumenda laboriosam alias. Harum ducimus nam minima error autem.
    Zertifizierter Kundenservice-Systemarchitekt
    Version 7.2 | Nov 7, 2021
    Download certificate

    Share certificzte

  • Facebook
  • X
  • LinkedIn
  • Email
  • Most Recent Badges

    Senior System Architect
    Version 7.2 | Nov 7, 2021
    Senior System Architect
    Version 7.2 | Nov 7, 2021
    Senior System Architect
    Version 7.2 | Nov 7, 2021
    Senior System Architect
    Version 7.2 | Nov 7, 2021
    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.