Alert Box 

.alert-box {
    align-items: center;
    background-color: $gray-300;
    color: $primary;
    display: flex;
    flex-direction: column;
    font-size: $font-size-lg;
    gap: $spacer;
    max-width: 350px;
    padding: $spacer * 1.5;
    text-align: center;

    .ti {
        color: $accent;
        font-size: 40px;
    }
}

Varianten

Standard

Sed posuere consectetur est at alfo lobortis. Cum sociis natoque penatibus et magnis dis parturient montes. 
<div class="alert-box">
    <i class="ti ti-alert-triangle"></i>
    Sed posuere consectetur est at alfo lobortis. Cum sociis natoque penatibus et magnis dis parturient montes.
    <button class="btn btn-primary">Aktion hier</button>
</div>

Varianten