Brand Components
burger menu
Brand
Logo Product logos Spacing Typography Colors Patterns Icons
Components
Grid Navigation Buttons UI Elements Modals Prices & Plans Extra assets Static banners
Grid Navigation Buttons UI Elements Modals Prices & Plans Extra assets Static banners
View in Figma
Modals
Providing contextual information and options in form of an additional layer
on top of the current state of the interface.
Info modal


Instructions
Instructions
  • Type: Info center align, Info, With form
  • Description: Edit the displayed description label
  • Title: Edit the displayed title label
Instructions
Note
The modal is fully responsive, so we have one template that adjusts in mobile &
desktop
With form
modal with form
Info center align
modal Info center align
Info
modal Info
Alert modal


Instructions
Instructions
  • Status: Warning, Success, Attention, Error, Info
  • Device: Desktop, Mobile
  • Icon: Show/hide icon
  • Title: Edit the displayed title label based on the status
  • Description: Edit the displayed title label
  • Button: Show/hide button
Info
modal Info modal Info
Warning
modal Warning modal Warning
Warning
modal Warning modal Warning
Attention
modal Attention modal Attention
Error
modal Error modal Error
Tooltip


Instructions
Instructions
  • Placement: Right, Left, Top, Bottom
  • Title: Edit the displayed title label
  • Has Body text: Show/hide text
  • Body: Edit the displayed body label
Instructions
Note
The modal is fully responsive, so we have one template that adjusts in mobile & desktop
modal Tooltip