Modals

The modals display the content in a layer that overlaps the application. We use them as dialogues for different purposes.

They grow according to the amount of content inside. The modals can have an icon, title and an explanatory paragraph, always accompanied by a button that calls the action or closes the modal to return to the application screen.

Corner radius

Rounded corners evoke confidence and make the user interface easier and more user-friendly. The default radius value we use for these UI elements is 4px.

The corner radius should be maintained on all inputs, cards, or any component with corners.

4px

Corner radius

4px all sides.

The header of the modal must be clear with the action that it will carry out and within the actions that it entails include the discard option.

Structure

Icon: Located at the top, implemented to give dynamism to the design. This design should reinforce the action that the user will perform.
Color: CoolGray700

Title: It must be clear about the action to be taken.
Color: CoolGray700

Text: Its function is to confirm the action.
Color: Cool Gray 400

Actions: Located at the top, implemented to give dynamism to the design. This design should reinforce the action that the user will perform.
Color: CoolGray700

Close button: Located at the top, implemented to give dynamism to the design. This design should reinforce the action that the user will perform.
Color: CoolGray700 

<div class="m-auto w-3/5 block p-4 bg-white rounded-md shadow relative">
    <button class="absolute right-0 top-0 m-3 hover:opacity-50"><img src="https://placetopay-org.github.io/spartan-docs/assets/images/close.svg" alt="close button"></button>
    <img src="https://placetopay-org.github.io/spartan-docs/assets/images/error-ilustration.svg" class="block m-auto my-4">
    <p class="font-semibold p-2 text-center text-gray-700 m-1">Delete microsite</p>
    <p class="text-center m-0 mb-5">Are you sure you want to delete "Evertec Medellín"?</p>
    <div class="flex justify-around flex-col sm:flex-row">
        <button class="btn btn-white">Delete</button>
        <button class="btn btn-dark">Cancel</button>
    </div>
</div>