@inkline/inkline/components/IAlert/examples/color-variants.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-alert color="info">
    <template #icon>
        <i-icon name="ink-info" />
    </template>
    <p>Heads up! This alert needs your attention, but it's not super important.</p>
</i-alert>

<i-alert color="success">
    <template #icon>
        <i-icon name="ink-check" />
    </template>
    <p>Well done! You successfully read this important alert message.</p>
</i-alert>

<i-alert color="warning">
    <template #icon>
        <i-icon name="ink-warning" />
    </template>
    <p>Warning! Better check yourself, you're not looking too good.</p>
</i-alert>

<i-alert color="danger">
    <template #icon>
        <i-icon name="ink-danger" />
    </template>
    <p>Oh snap! Change a few things up and try submitting again.</p>
</i-alert>