<div class='d-flex justify-content-center m-4'>
  <div class='card-message-card'>
    <div class='d-flex justify-content-center mb-4'>
      <svg xmlns="http://www.w3.org/2000/svg" width="67" height="59" viewBox="0 0 67 59" fill="none">
        <path d="M28.1905 2.82155L0.756584 50.335C0.261031 51.193 9.17164e-05 52.1664 2.41733e-08 53.1573C-9.1668e-05 54.1481 0.260668 55.1215 0.756062 55.9796C1.25146 56.8377 1.96403 57.5503 2.82214 58.0457C3.68025 58.5411 4.65366 58.8019 5.64451 58.8018H60.5079C61.4987 58.8019 62.4722 58.5411 63.3303 58.0457C64.1884 57.5503 64.9009 56.8377 65.3963 55.9796C65.8917 55.1215 66.1525 54.1481 66.1524 53.1573C66.1523 52.1664 65.8914 51.193 65.3958 50.335L37.9649 2.82155C37.4695 1.96368 36.7572 1.25131 35.8993 0.756028C35.0414 0.260745 34.0683 0 33.0777 0C32.0871 0 31.114 0.260745 30.2561 0.756028C29.3982 1.25131 28.6858 1.96368 28.1905 2.82155Z" fill="var(--error-color)"></path>
        <path d="M33.4356 17.4757H32.7199C30.9581 17.4757 29.5298 18.904 29.5298 20.6659V35.9142C29.5298 37.6761 30.9581 39.1043 32.7199 39.1043H33.4356C35.1974 39.1043 36.6257 37.6761 36.6257 35.9142V20.6659C36.6257 18.904 35.1974 17.4757 33.4356 17.4757Z" fill="white"></path>
        <path d="M33.0777 51.1978C35.0372 51.1978 36.6257 49.6094 36.6257 47.6499C36.6257 45.6904 35.0372 44.1019 33.0777 44.1019C31.1183 44.1019 29.5298 45.6904 29.5298 47.6499C29.5298 49.6094 31.1183 51.1978 33.0777 51.1978Z" fill="white"></path>
      </svg>
    </div>
    <p class='card-message-text'>
      Here we can type a success or failure message to the user
    </p>
    <a class='card-message-button card-message-button-failure' href='/'>
      Do action
    </a>
  </div>
</div>