Dialog box
Dialog boxes are used to make the user aware of important information.
Breakdown
A dialog box uses a grouping of elements, paragraph, heading and a button to make important information more prominent on the page.
Dialog box headline
Lorem ipsum dolor sit amet consectetur. Eu sapien elit orci odio elit non laoreet. Id consequat aliquam mauris fermentum viverra. Fringilla molestie dui duis felis eu. Nullam volutpat sed nisi purus mattis sed ut morbi.
Usage
Dialog boxes give emphasis to important content. For example, announcements you want the public to be aware of. Position banners high up on a page to give stronger prominence.
Anatomy
Vertical padding
Dialog boxes have a vertical padding of 36px on breakpoints higher than 992px. It reduces to 27px between breakpoints of 992–576px and has a minimum of 18px at breakpoints of 576px or below.
Horizontal padding
Dialog boxes have a horizontal padding of 36px on breakpoints higher than 992px. It reduces to 27px between breakpoints of 992–576px and has a minimum of 18px at breakpoints of 576px or below.
Vertical gap
Dialog boxes have a vertical gap of 18px between the heading and the paragraph beneath.
