Make Callouts box

[sandsoncosta]

I created this box as a sort of callout box to give it a more prominent feel.

I know there's a specific one I came up with and it's already implemented, which is more of a "Read also!" option that shares a link.

This idea is a sort of "Quest Box."

<div style="
  border: 2px solid #ff5252;
  background-color: #ffffffff;
  color: #ff5252;
  padding: 1rem;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  max-width: 400px;
  margin: 2rem auto;
  text-align: center;
">
  <strong>💪 BOSS FIGHT</strong><br><br>
  Desafio da Semana:<br>
  Identifique 1 área da sua vida que precisa de metanoia.<br>
  Escreva num papel.
</div>

<div style="
  background-color: #efc47eff;
  color: #db5d14ff;
  padding: 1.5rem;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 5px #db5d14ff;
  max-width: 400px;
  margin: 2rem auto;
  text-align: center;
  border: none;
">
  <strong style="
    display: inline-block;
    background-color: #db5d14ff;
    color: #FFFFFF;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
  ">
    Desafio da Semana
  </strong>
  <p style="margin-top: 1rem; font-weight: 600; font-size: 1.2rem;">
    Identifique 1 área da sua vida que precisa de metanoia.<br>
    Escreva num papel.
  </p>
  <p style="margin-top: 0.5rem;">
  </p>
</div>

[razonyang]

Looks good, I'd suggest creating your own module, I'd love to mention it on the docs site.

Here is a module guide, but it hasn't been updated for a long time, it may helps.