What does the component do?
It is used to display detailed information of a content page.
When should the component be used?
- If detailed or additional information has to be shown on-demand on part of a page (for example, additional support when the
tooltip is not sufficient). - To display the editing mode on forms.
- For an enlarged view of images.
Rules
- The referenced page is not left.
- When the lightbox opens, it always fills the browser window.
- The lightbox has its own header which is always sticky.
- Only content-describing information may appear in the header (for example, the train number).
- The lightbox content can be created as part of basic design.
Variants
Default
With form components
- A lightbox with form elements contains at least a ‘cancel’ and an ‘apply’ button.
- The ‘cancel’ button closes the lightbox again.
- If the lightbox is closed (‘cancel’ or X-button) when existing entries in the form have been changed, a warning message appears indicating that the form contains unsaved data.
- The buttons of a form (‘cancel’, ‘apply’, other functions) may be inserted in the footer.
- The footer is always sticky and is displayed across the entire width of the lightbox (the same as the header).