Modals are used to display content in a layer above the application. This paradigm is used in cases such as the creation or editing of a record, as well as some types of messaging and wizards.
Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide.
Modals always have an equal amount of space at the top and bottom to account for the height of the close button.
Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll.
Modals can have a tagline in the header, simply by adding a paragraph after the heading.
They should not be used for alert messages.
The side variation is used when is important to not block the entire screen, for example the results of applying multiple filters to the content.