Dialog
The dialog can be opened by adding data-dialog="<ID>" to a <button>.
Alternatively it can also be rendered open by default by passing open: true.
Information
- Folder
src/components/elements/dialog
Files
Schema
Mocks
Template
// src/components/elements/dialog/dialog.twig
<dialog class="Dialog js-Dialog{{ full_size_mobile ? " Dialog--fullSizeMobile" : "" }}" id="{{ id }}"{% if open %} open{% endif %} aria-labelledby="{{ id }}-title">
<form method="dialog">
<button class="Dialog-close{{ full_size_mobile ? " Dialog-close--fullSizeMobile" : "" }}" type="submit" aria-label="{{ close_label }}">
{% include "@elements/icon/icon.twig" with {
name: "close",
} only %}
</button>
</form>
<h2 class="Dialog-heading{{ hidden_title ? " u-hiddenVisually" : "" }}" id="{{ id }}-title">{{ title }}</h2>
<div class="Dialog-content">
{{ content|raw }}
</div>
</dialog>