A modal with minimal options
First let's start with hello world!
ModalManager.instance.addModal({
body : {
content : `<div>Hello <span style="color: red;">world!</span></div>`
}
});
Please note: The modal body uses fex with direction set to column. So that it can render content vertically with some nice spacing. So, if you put text content along with html content inside tags, like span, paragraph, div, form, etc. The flex system will try to render them all vertically thinking they content has multiple blocks.
This is fine for most cases, but inline content like span can render as separate blocks, and this will certainly be breaking your intended design. So, simply wrap your html content inside a div element.
See what happens when the notes modal opens? It renders "Please note:" and "most cases" in separate
block vertically, while you just want them to be inline