Alert

<dv-alert class="shadow-lg">
  Lorem ipsum dolor sit amet, consectetur adip!
</dv-alert>
vue

<dv-alert type="info">Lorem ipsum dolor sit amet, consectetur adip!</dv-alert>
vue

<dv-alert type="success">
  Lorem ipsum dolor sit amet, consectetur adip!
</dv-alert>
vue

<dv-alert type="warning">
  Lorem ipsum dolor sit amet, consectetur adip!
</dv-alert>
vue

<dv-alert type="error">
  Lorem ipsum dolor sit amet, consectetur adip!
</dv-alert>
vue

<dv-alert type="error">
  <template v-slot:default>
    Lorem ipsum dolor sit amet, consectetur adip!
  </template>
  <template v-slot:actions name="actions">
    <dv-button type="ghost" size="sm" class="mr-2">cancel</dv-button>
    <dv-button type="primary" size="sm">apply</dv-button>
  </template>
</dv-alert>
vue

<dv-alert>
  <template v-slot:icon>
    <icon-heart color="#ef3636" />
  </template>
  <template v-slot:default>
    Lorem ipsum dolor sit amet, consectetur adip!
  </template>
  <template v-slot:content>
    Lorem ipsum dolor sit amet, consectetur adip! Lorem ipsum dolor sit amet,
    consectetur adip!Lorem ipsum dolor sit amet, consectetur adip!Lorem ipsum
    dolor sit amet, consectetur adip!Lorem ipsum dolor sit amet, consectetur
    adip!Lorem ipsum dolor sit amet, consectetur adip!
  </template>
  <template v-slot:actions>
    <dv-button type="ghost" size="sm" class="mr-2">
      <icon-ellipsis-horizontal size="1.5em" />
    </dv-button>
  </template>
</dv-alert>
vue