Modals
- Basic Ui
- Modals
Default Modal
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal With Slide Down Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal With Slide Up Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal Sizes
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Static Modal
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal Scrolling Behavior
Modal title
Be bold
Motivate teams to do their best work. Offer best practices to get users going in the right direction. Be bold and offer just enough help to get the work started, and then get out of the way. Give accurate information so users can make educated decisions. Know your user's struggles and desired outcomes and give just enough information to let them get where they need to go.
Be optimistic
Focusing on the details gives people confidence in our products. Weave a consistent story across our fabric and be diligent about vocabulary across all messaging by being brand conscious across products to create a seamless flow across all the things. Let people know that they can jump in and start working expecting to find a dependable experience across all the things. Keep teams in the loop about what is happening by informing them of relevant features, products and opportunities for success. Be on the journey with them and highlight the key points that will help them the most - right now. Be in the moment by focusing attention on the important bits first.
Be practical, with a wink
Keep our own story short and give teams just enough to get moving. Get to the point and be direct. Be concise - we tell the story of how we can help, but we do it directly and with purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the same time realize that nobody likes a nosy neighbor. Give the user just enough to know that something awesome is around the corner and then get out of the way. Write clear, accurate, and concise text that makes interusers more usable and consistent - and builds trust. We strive to write text that is understandable by anyone, anywhere, regardless of their culture or language so that everyone feels they are part of the team.
Modal title
Be bold
Motivate teams to do their best work. Offer best practices to get users going in the right direction. Be bold and offer just enough help to get the work started, and then get out of the way. Give accurate information so users can make educated decisions. Know your user's struggles and desired outcomes and give just enough information to let them get where they need to go.
Be optimistic
Focusing on the details gives people confidence in our products. Weave a consistent story across our fabric and be diligent about vocabulary across all messaging by being brand conscious across products to create a seamless flow across all the things. Let people know that they can jump in and start working expecting to find a dependable experience across all the things. Keep teams in the loop about what is happening by informing them of relevant features, products and opportunities for success. Be on the journey with them and highlight the key points that will help them the most - right now. Be in the moment by focusing attention on the important bits first.
Be practical, with a wink
Keep our own story short and give teams just enough to get moving. Get to the point and be direct. Be concise - we tell the story of how we can help, but we do it directly and with purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the same time realize that novbody likes a nosy neighbor. Give the user just enough to know that something awesome is around the corner and then get out of the way. Write clear, accurate, and concise text that makes interusers more usable and consistent - and builds trust. We strive to write text that is understandable by anyone, anywhere, regardless of their culture or language so that everyone feels they are part of the team.
Vertically Centered Modals
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
Be bold
Motivate teams to do their best work. Offer best practices to get users going in the right direction. Be bold and offer just enough help to get the work started, and then get out of the way. Give accurate information so users can make educated decisions. Know your user's struggles and desired outcomes and give just enough information to let them get where they need to go.
Be optimistic
Focusing on the details gives people confidence in our products. Weave a consistent story across our fabric and be diligent about vocabulary across all messaging by being brand conscious across products to create a seamless flow across all the things. Let people know that they can jump in and start working expecting to find a dependable experience across all the things. Keep teams in the loop about what is happening by informing them of relevant features, products and opportunities for success. Be on the journey with them and highlight the key points that will help them the most - right now. Be in the moment by focusing attention on the important bits first.
Be practical, with a wink
Keep our own story short and give teams just enough to get moving. Get to the point and be direct. Be concise - we tell the story of how we can help, but we do it directly and with purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the same time realize that novbody likes a nosy neighbor. Give the user just enough to know that something awesome is around the corner and then get out of the way. Write clear, accurate, and concise text that makes interusers more usable and consistent - and builds trust. We strive to write text that is understandable by anyone, anywhere, regardless of their culture or language so that everyone feels they are part of the team.
Modal Focus Management
Toggle Between Modals
Modal 1
Show a second modal and hide this one with the button below.
Modal 2
Hide this modal and show the first with the button below.
Fullscreen Modal
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
Stacked Overlays
Modal title (level 1)
Stacked Overlays modals are a user interface design concept where multiple overlay windows, or modals, are displayed on top of each other, typically in a web or app interface. These modals are often used to present additional information, confirm actions, or to guide users through multi-step processes. The key characteristic of Stacked Overlays is their layered appearance, where each new modal partially covers the previous one, creating a stack effect. This stacking can provide a visual cue to users about the depth of their interaction or the sequence of tasks. To maintain usability, these modals are designed with careful attention to transparency, size, and the ability to easily return to previous layers. They often incorporate animations for smooth transitions between layers and may include features like dimming the background to focus user attention on the active modal.
Modal title (level 2)
Stacked Overlays modals represent a design approach in user interfaces, where several overlay windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile application interfaces.
Modal title (level 3)
Stacked Overlays: UI design with layered modals, often in web/apps, where each window overlays the previous one.
Custom backdrop color
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.