Alert Image Header

Hy, I need put a image on alert header, like this


I make this css I could put the image, but it is being cut, I tried to put a z-index bigger than her father but it does not work. Can someone help me?


This is the css that Im using to edit the modal

.alert-button-group {
    justify-content: space-around !important;
    button {
        color: color($colors, button-laranja) !important;
        &:last-of-type {
            background: color($colors, button-laranja);
            border-radius: 12px;
            color: #fff !important;
            height: 36px;
            width: 79px;
            span {
                position: relative;
                left: -15px;

.alert-wrapper {
    position: absolute;
    z-index: 10004;
    .alert-head {
        &::before {
            content: '';
            background: url(../assets/img/alert-header.svg) no-repeat;
            background-size: cover;
            height: 40px;
            width: 40px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: -20px;
            z-index: 20004;

.alert-message {
    text-align: center;
1 Like

If you’re going to use a lot of CSS, you’re better off modifying a modal or a popover. A lot of alert formatting is impossible, and almost all modal and popover formatting is possible. I think you’re better off creating a small modal page with ModalController, and using it as a custom alert.

1 Like

Hi Did you resolved it?

I have the same question… did u resolved it?