This component defines the standard visual style for the modal element.
Usage Guidelines
Every instance of a modal element should come from this component.
Features
A modal window requires the user to interact with it before returning to the parent window or application.
The default modal style is comprised of a title area with close button, a content area, and a footer area with actionable Standard Buttons.
The alternate modal is similar to the standard modal but has a title area with a Sea (#0C5D99) background color.
The image modal is for image content. It replaces the title with zoom controls and has a Black (#000000) background color.
The modal is fully responsive down to the Extra Small width of 320px.
The modal Large Title reduces in font size for Extra Small viewports.
Standard Modal
Alternate Modal
Image Modal
Here are examples of how the modal will handle long titles that must wrap.
Standard Modal
Standard Modal at Responsive Size
Initial version
Modal